为什么react chakra-ui overflow不起作用？

Question

这是codesandbox链接：https://codesandbox.io/s/focused-cookies-jbqqw?file=/src/App.js

下面是我的代码：

import { Button, ChakraProvider, Flex } from "@chakra-ui/react";
import "./styles.css";

const Chat = () => {
  return (
    <Flex
      className="chat"
      bg="cadetblue"
      minWidth="30%"
      maxWidth="30%"
      overflowY="auto" // this is not woking.
    >
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea nobis, soluta
      quasi sapiente ullam ex aut quod at corporis pariatur voluptatem. Et nobis
      dignissimos quidem sapiente in doloribus ad suscipit? Dolorum ea atque,
      aliquam quae impedit architecto cupiditate, ullam illum, aliquid hic
      debitis doloremque laudantium? Molestiae ipsa nobis voluptates accusantium
      odit aliquid molestias! Quo, odit numquam officia sunt at assumenda? Illo
      obcaecati facere ipsum eveniet, dicta, harum consequatur perspiciatis
      accusamus voluptatum, incidunt vero blanditiis amet aliquid dignissimos
      distinctio vitae corrupti ad magnam debitis nobis esse. Pariatur ducimus
      alias quo at? Necessitatibus nisi odit cupiditate neque saepe! A animi
      sunt dignissimos rerum atque similique, et accusantium, dolor pariatur
      unde nostrum saepe doloribus illo at eos suscipit neque dicta? Debitis,
      officia doloremque. Harum quaerat fugiat ullam minima quisquam unde
      reprehenderit? Ducimus, asperiores ea iure vitae officia eos, modi eius
      excepturi amet sapiente magnam! Velit id animi fuga at magnam omnis fugiat
      explicabo? Expedita fuga inventore provident! Voluptates aliquid nihil a
      quas quibusdam, tempora quis natus, reiciendis, incidunt earum in quos
      minima sit? Sed dicta nostrum itaque voluptas recusandae sit facere vero
      culpa. Quia temporibus odit et dolorem facilis pariatur voluptate quo
      itaque unde esse. Totam cumque, sapiente deleniti distinctio perferendis
      minima cum illum reprehenderit unde, perspiciatis facere ratione
      laboriosam suscipit, odio enim? Voluptates ratione numquam aperiam,
      possimus beatae odio obcaecati modi veniam repellendus doloribus
      assumenda, laborum velit dolor officiis illo dolorum mollitia eum iusto
      ipsam harum accusamus quis molestias ipsum! Assumenda, libero! Repellat,
      quam? Accusantium consequuntur facere dignissimos ratione quibusdam
      corporis? Nostrum deserunt cupiditate vitae rem laborum enim quis. Neque
      possimus perspiciatis similique sint consequatur sequi dolor, voluptate
      nobis quos ex. Ex. Illo iusto consectetur nostrum porro! Cum consectetur
      quae eaque velit. Laudantium nesciunt dignissimos cum quam eligendi
      voluptates, blanditiis assumenda eum aliquid consequatur mollitia modi
      praesentium minima nulla tenetur, repudiandae facilis.
    </Flex>
  );
};

export default function App() {
  return (
    <ChakraProvider>
      <Flex
        bg="red"
        height="100vh"
        width="100vw"
        direction="column"
        overflow="hidden"
      >
        <Flex bg="yellow" padding={2}>
          Navbar <Button size="sm">Click Me</Button>
        </Flex>
        <Flex className="playground-inner" flex="1">
          <Flex className="codeeditor" bg="blue" height="100%" width="100%">
            <Flex
              bg="tomato"
              direction="column"
              position="relative"
              height="100%"
              width="100%"
            >
              Code Editor Component
            </Flex>
            <Chat />
          </Flex>
        </Flex>
      </Flex>
    </ChakraProvider>
  );
}

我只希望聊天组件有溢出，而整个页面不应该有溢出/滚动。也就是说，整个网页是不可滚动的，但只有聊天组件有滚动。这在许多网站布局中都可以看到，但我的溢出并不像评论中所说的那样工作。

注意:请忽略大量的lorem文本。我添加这个是为了模拟我的滚动无法工作的事实。这可以是任何其他html组件，而不仅仅是lorem文本。

Answer 1

使用div包装内容，并从

<Flex>
  <div style={{ overflow:Y "scroll", height: "100vh" }}>
   ...
   ...
   ...
  </div>
</Flex>