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

如果在父元素上使用flex，則可以嘗試設置align-items: stretch在父元素上也align-items: stretch 。 這應該將該元素的所有子元素拉伸到相同的高度。 例如

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

Answer 2

在材料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/