I am currently utilizing a Material UI template within a react JS project.
My goal is to create a div (or Grid in MUI) that spans 100% of its container's height, containing two nested divs (or Grids) that are each set at 50% height. If the internal content exceeds the allocated 50%, it should be scrollable.
I have experimented with using sections but have not been successful in achieving the desired layout.
The approach I have taken so far only addresses 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>
This setup results in: https://i.stack.imgur.com/A8ojr.png
While this seems to work correctly for the first div where content can be added without issue, adding content to the second div causes the first div to extend beyond 50% of the total height as shown here: https://i.stack.imgur.com/olXPD.png
To address this challenge, how can I fix this layout issue?