Material-UI Grid Item height

Question

I have a row with multiple items and I want the height of all the items to equal the height of the tallest item, I basically want all the items to be the same height for this grid.

<Grid container layout={'row'} spacing={8}>
      <Grid item className={classes.section} xs={12} sm={12} md={4} lg={4} xl={4}>
        <div className={classes.teamMemberName}>
          {name}
        </div>
      </Grid>

      <Grid item xs={12} sm={12} md={4} lg={4} xl={4} className={classes.section}>
        <FirstTimeFillRate fillRate={firstTimeFillRate} />
      </Grid>

      <Grid item xs={12} sm={12} md={4} lg={4} xl={4} className={classes.section}>
        <BackOrders
          backOrdersByItem={backOrdersByItem}
          backOrdersStoresWait={backOrdersStoresWait}
        />
      </Grid>

      <Grid item xs={12} sm={12} md={4} lg={4} xl={4} className={classes.section}>
        <OrderVolume orderVolume={orderVolume} />
      </Grid>

      <Grid item xs={12} sm={12} md={8} lg={8} xl={8} className={classes.section}>
        <Inventory inventory={inventory} />
      </Grid>
    </Grid>

The section class has a background color of gray and I can see that the sections do not inherit the height of the row as can be seen in this sandbox: https://codesandbox.io/s/1826lw51z3

Answer 1

Simply apply height: 100% to the children of Grid items. In the code you have provided in the sandbox, add this property to the section class:

const section = {
  height: "100%",
  paddingTop: 5,
  backgroundColor: "#fff"
};

Please note that the code sample in your question is different from the sandbox, so the JSX should look like this:

<Grid item xs={12} md={4}>
  <div style={section}>component</div>
</Grid>

Here's the updated sandbox with a working demo: https://codesandbox.io/s/m7r7jnzzlx