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

Question

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.

Thanks, I just came across an SO post that said the same and I was writing the answer as you commented. — mahieyin-rahmun, Jun 10 '21 at 11:31

mahieyin-rahmun · Accepted Answer · 2022-05-31T16:48:48.587

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".

For MUI v5


    <Box
      sx={{
          mb: 2,
          display: "flex",
          flexDirection: "column",
          height: 700,
          overflow: "hidden",
          overflowY: "scroll",
         // justifyContent="flex-end" # DO NOT USE THIS WITH 'scroll'
        }}
    >

For MUI v4

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

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

1 Answers1