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

Question

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

  <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

在材质 ui 中，您可以在容器 Grid 上使用 alignItems="stretch"，如下面的代码所示：

<Paper elevation={10} style={{padding:'1.5em'}}>
    <Grid container direction='row' spacing={2} alignItems="stretch">

        <Grid item style={{height:'100%', width:'50%'}}>
        </Grid>

        <Grid item style={{height:'100%', width:'50%'}}>
        </Grid>

    </Grid>
</Paper>

你也不需要设置style={{display:'flex'}}，因为网格样式也设置了。

参考资料：

• https://material-ui.com/components/grid/

Answer 2

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

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