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;


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 item style={{height:'100%', width:'50%'}}>


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


Related Query

More Query from same tag