如何使用 FlexBox 制作垂直滚动内容答案

【问题标题】：How to make vertical scroll content with FlexBox如何使用 FlexBox 制作垂直滚动内容
【发布时间】：2020-11-04 07:59:21
【问题描述】：

我正在尝试使用 flex 实现滚动框 id=scroll 的 Box 元素占用了可用空间并且内容溢出了 Box 我怎样才能使框溢出=自动并使内容可滚动花几个小时来了解 flex 发生了什么这是一个真实的例子：https://codesandbox.io/s/flex-with-scroll-2cf9d

import React from "react";
import "./styles.css";
import { Box, Grid, CssBaseline } from "@material-ui/core";
export default function App() {
  return (
    <Box height="100vh" flexDirection="column" display="flex" bgcolor="blue">
      <CssBaseline />
      <Box p={2}>
        <Grid container spacing={3}>
          <Grid item xs={6}>
            <Box bgcolor="white">
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
            </Box>
          </Grid>
          <Grid item xs={6}>
            <Box bgcolor="white">
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
            </Box>
          </Grid>
        </Grid>
      </Box>
      <Box flex={1} flexDirection="column" display="flex" p={2}>
        <Grid style={{ display: "flex", flex: 1 }} container spacing={3}>
          <Grid style={{ display: "flex", flex: 1 }} item xs={6}>
            <Box id='scroll' flex={1} bgcolor="white">
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
              <div>ssss</div>
            </Box>
          </Grid>
          <Grid item xs={6} />
        </Grid>
      </Box>
    </Box>
  );
}

【问题讨论】：

标签： css reactjs flexbox material-ui

【解决方案1】：

在 Box 组件上添加自动溢出功能。

<Box overflow="auto" flex={1} flexDirection="column" display="flex" p={2}>

https://codesandbox.io/s/flex-with-scroll-82h9c

下图是我对您所描述的布局的理解。如果这不是您想要的，那么您可能需要更清楚地说明您的问题。

【讨论】：

id=scroll 的内容仍然会占用比可用空间更多的空间，我希望它不再占用 100vh 的空间，如果是这样，那就滚动
发布的带有自动溢出的代码和框，它似乎正在做你想要的。
??代码发送框无法使用 id 滚动超过 100vh 且内容超出容器框的框
我在外框周围放了一个黄色边框，在 id scroll Box 上放了一个红色边框。可以看到，外层 Box 只占用 100vh 并且 id scroll Box 的内容是可滚动的。
我将尝试以更好的方式提出我的问题我只需要之一在滚动中，而不是所有