时间戳

首页 > 解决方案 > React Material UI：框在 y 轴上不可滚动

css - React Material UI：框在 y 轴上不可滚动

问题描述

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

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

标签： cssreactjsmaterial-ui

解决方案

韦尔普，拧 CSS。显然，这是一个 CSS 错误。

使用 justify-content: flex-end 并拥有垂直滚动条

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

推荐阅读