React js material ui - two div 50% height-CodePudding

I'm working with a Material UI template in react JS.

I need to create a div (or Grid in MUI) 100% height of its container, that contains two divs (or Grids) that are 50% of height: if the inner content is heighter than the 50%, than needs to scroll.

I've also tried with sections, but I can't figure out how to do it.

What I came up with is (it's just the right column):

<Grid
        container
        direction="column"
        justifyContent="space-between"
        style={{ height: "100%" }}
      >
    <Grid item style={{ background: "red", height: "50%", overflowY: "auto" }} >
        <h1>OKKK</h1>
    </Grid>
    <Grid item style={{ background: "blue", height: "50%", overflowY: "auto" }} >
        <h1>OKKK</h1>
    </Grid>
</Grid>

And the result is:

Seems correct, but if I add content to the first div the height is maintained and i can see the scrollbar, but if i add content to the second div, the first div is too height, not 50% of the total height.

How can i solve this?

CodePudding user response：

try adding style={{ height: "100vh" }} on your parent container. That should work. For a better understanding the reasons why, take a look on this very well explained answer http://stackoverflow.com/a/31728799/3597276

CodePudding user response：

you can use Box component inside your Grid : <Box height="100vh"></Box>