Material ui 物料界面网格项高度

我有一行有多个项目，我希望所有项目的高度都等于最高项目的高度，我基本上希望所有项目在这个网格中的高度都相同

<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>

{name}

---

section类的背景颜色为灰色，我可以看到，section并不像在这个沙盒中看到的那样继承行的高度：

只需将

高度：100%

应用于网格项的子项。在沙盒中提供的代码中，将此属性添加到section类：

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

请注意，您问题中的代码示例与沙盒不同，因此JSX应该如下所示：

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

成分

---

这是一个更新的沙盒，它有一个运行演示：

我认为只要在网格容器中设置{{alignItems=“stretch”}就可以了？（当direction=“row”）时，它使所有项目都成为容器的高度。

stretch是默认值这是不够的