Reputation: 198
I have a Grid container which contains 2 Grid items. I've set the height of the container and the second Grid item to 100%. The height of the second Grid item is exceeding the height of the container and a scroll appears.
Here is the code if it helps.
function App() {
return (
<Grid container style={{height: '100%'}}>
<Grid item xs={12} style={{border: 'solid 1px'}}>
Header
</Grid>
<Grid item xs={12} style={{height: '100%', border: 'solid 1px'}}>
Content
</Grid>
</Grid>
)
}
https://codesandbox.io/s/8k0xy60nx2
How do i make the second Grid item occupy the remaining height of it's container and not exceed it? What am i missing here?
Thanks.
Upvotes: 7
Views: 21073
Reputation: 87
Man! This is annoying.
I hacked on the codesandbox a bit to make it closer to my view on this problem.
MDN / Web tech / CSS / max-height says that if a percentage is supplied, it defines the max-height as a percentage of the containing block's height.
I spent an hour walking up and down the dom tree in the Chrome dev tools styles debugger, and you can see where the vh
sized elements toward the root are the expected height, then the Mui Grid shows like max-height 100%
, height: 3319px
Upvotes: 1
Reputation: 429
Try this with direction="column"
,
<Grid
container
direction="column"
style={{ border: "solid 5px", height: "100%" }}
>
<Grid
item
style={{ border: "solid 1px", backgroundColor: "yellow" }}
>
Header
</Grid>
<Grid
item
xs
style={{ border: "solid 1px", backgroundColor: "red" }}
>
Content
</Grid>
</Grid>
Hope this helps...
Upvotes: 3
Reputation: 372
Notice the the parent container is overflowed with the height of the first item. It's because you set 100% height for the second item but you actually have 2 items in your parent. The sum of items need to be eqaul or lower if you don't want scroll bar. Try to set the height of the first item for 10% and the second for 90%. The scroll will disappear
Upvotes: 1