React Material UI：框在y轴上不可滚动[重复]答案

【问题标题】：React Material UI: Box not scroll-able in y-axis [duplicate]React Material UI：框在y轴上不可滚动[重复]
【发布时间】：2021-06-10 19:30:15
【问题描述】：

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

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

【问题讨论】：

删除 justifyContent="flex-end" 您的代码将起作用。
谢谢，我刚刚看到一个 SO 帖子，上面说了同样的话，我正在写你评论的答案。

标签： css reactjs material-ui

【解决方案1】：

Welp，搞砸 CSS。显然，这是一个 CSS 错误。

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

我所要做的就是删除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
      }}
    >

【讨论】：