Why does react chakra-ui overflow not work?

Question

Here is the codesandbox link: https://codesandbox.io/s/focused-cookies-jbqqw?file=/src/App.js

And here is my code:

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>
  );
}

I want only Chat component to have overflow while the entire page shouldn't have an overflow/scroll.That is the entire webpage is not scrollable but only the Chat component has a scroll. This is seen in many website layouts but my overflow isn't working as stated on line with the comment.

Note: Please ignore the massive lorem text. I added this to simulate the fact that my scroll is not working. This could be any other html component, not just lorem text.

Answer 1

Have a div wrapping the content and remove overflow from

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