CODEWITHSUNDEEP
cssreactjsmaterial-ui
Vinod K
Vinod K

Reputation: 198

Material-ui Grid item height is exceeding the height of it's container

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

Answers (3)

Chuck Waggon
Chuck Waggon

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

Praveenkumar Kalidass
Praveenkumar Kalidass

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>

Edited Sandbox

Hope this helps...

Upvotes: 3

kenodek
kenodek

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

Related Questions