I'm struggling to fit two large Grid items inside a Grid container.
- The Grid container needs to be 100% of the screen's height (or parent container)
- Grid items are large and need to fill the container while remaining scrollable
Image #1 shows the current situation, whereas image #2 depicts what I am aiming for. https://i.sstatic.net/scSQG.png
Here is the code snippet:
"@mui/material": "^5.14.15"
import { Grid } from '@mui/material';
<Grid container direction='row' style={{height: '100%', overflow: 'hidden'}}>
<Grid item xs={6}>
.......left large content.......
</Grid>
<Grid item xs={6}>
.......right large content......
</Grid>
</Grid>
Although setting overflow: 'hidden' makes it look better, the content of each Grid item remains unscrollable (even after setting overflow: 'scroll'). Any suggestions?