React Material UI：Box在y轴上无法滚动

Question

我已经卡在这个问题上好几个小时了，需要一些帮助。我正在尝试创建一个聊天组件，并且只想能够垂直滚动它。这里是在Codesandbox上提供的最小可重现示例：https://codesandbox.io/s/reverent-panini-lsbfg?file=/src/chat/ChatHistory.tsx 我已经固定了容器的高度（600px）并添加了overflow: "hidden"和overflowY: "scroll"样式，但它仍然不起作用，而我也不知道为什么。先谢谢了。

- mahieyin-rahmun

---

移除 justifyContent="flex-end" 你的代码就可以正常工作了。 - Nghiệp

谢谢，我刚看到一个 Stack Overflow 的帖子也是这么说的，当你评论时我正在写答案。 - mahieyin-rahmun

Answer 1

哎呀，CSS出问题了。显然这是一个CSS的bug。

使用 justify-content: flex-end 以实现垂直滚动条

我所要做的就是移除 justifyContent: "flex-end"。

对于 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'
        }}
    >

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

- mahieyin-rahmun