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

Question

我已经被这个问题困扰了好几个小时了，我需要一些帮助。我正在尝试创建一个聊天组件，我只想能够垂直滚动它。这是 Codesandbox 上的最小可重现示例：https://codesandbox.io/s/reverent-panini-lsbfg ?file=/src/chat/ChatHistory.tsx

我已经将容器的高度固定（600px）并添加了overflow: "hidden"和overflowY: "scroll"样式，但它仍然不起作用，我不知道为什么。提前致谢。

Answer 1

好吧，螺丝CSS。显然，这是一个 CSS 错误。

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