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

问题描述

这是代码和框链接：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>
  );
}

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

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

解决方法

有一个 div 包装内容并从

中删除溢出

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