mui Grid items not fit Grid container

I'm having a hard time to fit two Grid items inside Grid container.

• Grid container should be 100% hight of the screen (or parent container)
• Grig items are large and need to fit container and be scrollable

Pic #1 is what it is, pic #2 is what I need

so my code is:

"@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>

Overflow: 'hidden' makes it look right but content of each Grid item is not scrollable (even I set overflow: 'scroll' for each Grid item). Please advise