如何使第一块与第二块相同的高度？

Question

如何使第一个网格项目与第二个网格项目具有相同的高度？

  <Grid container spacing={2}>
      <Grid item xs={6}>
        {/* this container should be the same height as the second  */}
        <div>
          {[...Array(20).keys()].map(item => {
            return (
              <div style={{ border: "solid grey 1px", margin: 5 }}>{item}</div>
            );
          })}
        </div>
      </Grid>
      <Grid item xs={6}>
        {/* this container can have dinamic height */}
        <div
          style={{
            height: Math.floor(Math.random() * 500 + 50),
            border: "solid grey",
            textAlign: "center"
          }}
        >
          second block
        </div>
      </Grid>
    </Grid>

Codesandbox示例https://codesandbox.io/s/st-of-grid-stretch-sscuj

应该看起来像这样

Answer 1

在“父网格”中放置此代码，然后尝试

  <Grid
          container
          direction="row"
          justify="center"
          alignItems="stretch"
        >
    </Grid>