css - 如何使用 FlexBox 制作垂直滚动内容

Question

我正在尝试用 flex 实现一个滚动框 id=scroll 的 Box 元素占用了可用空间并且内容溢出了 Box 我怎样才能使 Box 溢出 = auto 并使内容可滚动花费数小时来了解什么这是一个真实的例子：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>
  );
}

标签： cssreactjsflexboxmaterial-ui

Answer 1

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

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

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

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