使用 Flex-box 为 Material-UI 制作两个相同高度的网格项

Question

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

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

Answer 1

如果您在父元素上使用 flex，您align-items: stretch也可以尝试在父元素上进行设置。这应该将该元素的所有子元素拉伸到相同的高度。例如

.container {
  display: flex;
  align-items: stretch;
}