7

I have two grid items that I want to make the same height by trying to use flex, however nothing seems to work. I believe I might now be using the Grid element in Material UI correctly. I have tried using the height and width properties as well.

  <Paper elevation={10} style={{padding:'1.5em'}}>

      <Grid container direction='row' spacing={2} style={{display:'flex'}}>

          <Grid item style={{height:'100%', width:'50%'}}>
          </Grid>

          <Grid item style={{height:'100%', width:'50%'}}>
          </Grid>

      </Grid>

  </Paper>
user2892804
  • 133
  • 1
  • 2
  • 11

2 Answers2

3

In material ui you can use alignItems="stretch" on the container Grid as you can see in the below code:

<Paper elevation={10} style={{padding:'1.5em'}}>
    <Grid container direction='row' spacing={2} alignItems="stretch">

        <Grid item style={{height:'100%', width:'50%'}}>
        </Grid>

        <Grid item style={{height:'100%', width:'50%'}}>
        </Grid>

    </Grid>
</Paper>

And you didn't need to set style={{display:'flex'}} because of grid style set it too.

References:

Mehdi Yeganeh
  • 2,019
  • 2
  • 24
  • 42
1

If you are using flex on the parent element, you can try setting align-items: stretch on the parent too. This should stretch all children of that element to be the same height. E.g.

.container {
  display: flex;
  align-items: stretch;
}
Oliver
  • 2,930
  • 1
  • 20
  • 24
  • 1
    I am using the withStyles method which uses classNames and I have set the parent to col and the children to row like this row: { display: 'flex', alignItems: 'stretch' }, col: { flex: 1 } but this still isnt working – user2892804 Aug 30 '19 at 16:13