使用MaterialUI网格的意外空白空间

Question

我正在使用实质性UI响应组件，尤其是问题似乎与Grid component有关。如图中所示，我得到了一个非常奇怪的空间，我无法确定它的来源。

我已将问题减少到最小程度，现在它只是一个包含两个图像的网格中的一个网格。

<Grid container direction={"column"} style={{ "background-color": "red" }}>
  <Grid item>
    <Grid container style={{ "background-color": "blue" }}>
      <Grid item xs={11} style={{ "background-color": "purple" }}>
        <CustomImg />
        <CustomImg />
      </Grid>
    </Grid>
  </Grid>
</Grid>

我不知道 red 空间的来源。

线索：如果我将<Grid item xs={11}更改为xs={12}或删除了整个xs={...}，那么空格就消失了。...

这里是codesanbox，因此您可以希望告诉我我做错了什么： https://codesandbox.io/s/x7q8q0rr5z