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

Question

I have a following view. The box (columnBox) can contain a lot of items. However in the view the box doesn't scroll. I have set overFlowY as auto, I can not set height as I don't know the exact height it will exand to. However my parent has fixed height, only that box contents need to be scrollable.

What can I do to fix this

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

You need to add max Height to columnBox then only it will get a scroll element and there is a mistake in your code you have added Card prop height="calc(100vh - 200px)" but it won't take calc values you need to pass it directly in styles like <Card style={{height:"calc(100vh-200px)"}}

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

I have put the code here for it

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

You can refer the CodeSandbox if you want