Html 使用Flex box为材质UI创建两个相同高度的网格项

我有两个网格项，我想通过尝试使用flex使其具有相同的高度，但似乎没有任何效果。我相信我现在可能正确地使用了MaterialUI中的网格元素。我也尝试过使用高度和宽度属性

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

---

如果在父元素上使用flex，也可以尝试在父元素上设置

对齐项目：拉伸。这将拉伸该元素的所有子元素，使其具有相同的高度。例如

.container{
显示器：flex；
对齐项目：拉伸；
}
在物料界面中，您可以在容器网格上使用
alignItems=“stretch”
，如下代码所示：



您不需要设置
style={{display:'flex'}}
，因为网格样式也可以设置它

参考资料：



我使用的是使用类名的withStyles方法，我将父对象设置为col，子对象设置为类似以下行的行：{display:'flex'，alignItems:'stretch'，col:{flex:1}，但这仍然不起作用