React.Box 组件内的可滚动内容

Question

我有以下看法。框（columnBox）可以包含很多项。但是在视图中该框不会滚动。我已将 overFlowY 设置为 auto ，我无法设置高度，因为我不知道它将扩展到的确切高度。但是我的父母有固定的高度，只有那个盒子的内容需要是可滚动的。

我能做些什么来解决这个问题

columnBox: {
        overflowY:'auto',
        display: "flex",
        flexGrow: 1,
        flexDirection:"column"
    }

<Card
 height="calc(100vh - 200px)"
>
    <Box>
    <Divider />
    <Box height={88} p={4} display="flex" alignItems="center">
        {children}            
    </Box>
    <Divider />
   <Box className={classes.columnBox} bgcolor="green">
        {products &&
         products.length > 0 &&
         testProducts.map(item => {
           return (
               <Fragment>
                 <Box
                    display="flex"
                    justifyContent="space-between"
                    alignItems="center"
                >
                  {someChildren}
                </Box>
                <Divider>
              <Fragment>
         })

Answer 1

您需要向 columnBox 添加最大高度，然后它才会获得滚动元素，并且您添加的代码中有错误 Card prop height="calc(100vh - 200px)" 但它不会采用 calc 值您需要直接以 等样式传递它

columnBox: {
        overflowY:'auto',
        display: "flex",
        flexGrow: 1,
        flexDirection:"column",
        maxHeight:"200px"
    }

我已经把代码放在这里了

import "./styles.css";
import { Card, Box, Divider } from "@material-ui/core";

const products = [
  "apple",
  "ball",
  "cat",
  "dog",
  "elephant",
  "apple",
  "ball",
  "cat",
  "dog",
  "elephant"
];
export default function App() {
  return (
    <div className="App">
      <Card style={{ height: "calc(100vh - 200px)" }}>
        <Box>
          <Divider />
          <Box height={88} p={4} display="flex" alignItems="center">
            <h1>Box</h1>
          </Box>
          <Divider />
          <Box
            bgcolor="green"
            style={{
              overflowY: "auto",
              maxHeight: "180px",
              display: "flex",
              flexGrow: 1,
              flexDirection: "column"
            }}
          >
            {products?.map((data) => {
              return (
                <>
                  <Box
                    display="flex"
                    justifyContent="space-between"
                    alignItems="center"
                  >
                    <p>{data}</p>
                  </Box>
                  <Divider />
                </>
              );
            })}
          </Box>
        </Box>
      </Card>
    </div>
  );
}

如果需要，您可以参考 CodeSandbox