React Material UI: Box not scroll-able in y-axis

I have been stuck at this problem for hours now and I need some help. I am trying to create a Chat component and I just want to be able to scroll it vertically. Here's a minimum reproducible example at Codesandbox: https://codesandbox.io/s/reverent-panini-lsbfg?file=/src/chat/ChatHistory.tsx

I have made the container's height fixed (600px) and added the overflow: "hidden" and overflowY: "scroll" styles, but it still does not work, and I have no idea why. Thanks in advance.

1 answer

  • answered 2021-06-10 11:30 mahieyin-rahmun

    Welp, screw CSS. Apparently, it's a CSS bug.

    Use justify-content: flex-end and to have vertical scrollbar

    All I had to do was to remove justifyContent: "flex-end".

    
        <Box
          mb={2}
          display="flex"
          flexDirection="column"
          // justifyContent="flex-end" # DO NOT USE THIS WITH 'scroll'
          height="700px" // fixed the height
          style={{
            border: "2px solid black",
            overflow: "hidden",
            overflowY: "scroll" // added scroll
          }}
        >