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

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

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

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>
         })

列框：{
溢出：'auto'，
显示：“flex”，
flexGrow:1，
flexDirection：“列”
}
{儿童}
{产品&&
产品长度>0&&
testProducts.map（项=>{
返回(
{someChildren}
})

您需要将最大高度添加到columnBox，然后只有它会得到一个滚动元素，并且您的代码中有一个错误您添加了Card prop Height=“calc（100vh-200px）”，但它不会接受您需要在样式中直接传递的calc值，例如{ 返回( {data}

); })} ); } 如果需要，可以参考CodeSandbox

---

不会限制最大高度滚动，我只能滚动部分，列表可以很长。我得到它，然后传递maxHeight:inherit，然后它将从父级继承高度，无论父级的高度是多少，它都将接受该高度，如果它穿过它，则滚动将出现

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>
  );
}