为何新增行时MaterialUI Grid组件宽度会增大？

我用<Box>组件实现页面内容的水平垂直居中，同时用<Grid>组件构建表单布局。但发现新增size=12且内容完全相同的Grid子项时，整个Box的宽度会变大。

示例代码1（2行Grid子项） #

<Box
  display="flex"
  justifyContent="center"
  alignItems="center"
  minHeight="100vh"
>
  <Grid container spacing={0} border="1px solid black">
    <Grid size={12}>
      <Typography>Hello</Typography>
    </Grid>
    <Grid size={12}>
      <Typography>Hello</Typography>
    </Grid>
  </Grid>
</Box>

渲染效果：

示例代码2（4行Grid子项） #

<Box
  display="flex"
  justifyContent="center"
  alignItems="center"
  minHeight="100vh"
>
  <Grid container spacing={0} border="1px solid black">
    <Grid size={12}>
      <Typography>Hello</Typography>
    </Grid>
    <Grid size={12}>
      <Typography>Hello</Typography>
    </Grid>
    <Grid size={12}>
      <Typography>Hello</Typography>
    </Grid>
    <Grid size={12}>
      <Typography>Hello</Typography>
    </Grid>
  </Grid>
</Box>

渲染效果：

这不符合逻辑，原生HTML/CSS也复现不了这个问题，请问原因是什么？

这种情况大概率是你使用的UI库（推测是Material UI）的Grid组件默认行为导致的：

• Grid容器在未设置固定宽度或最大宽度时，会根据子项布局逻辑动态计算宽度。当子项数量增加，容器可能触发了内部的尺寸计算偏差，错误扩展了宽度。
• flex容器（Box）的对齐逻辑与Grid的自动尺寸计算存在冲突。justify-content: center的flex容器会让子元素宽度尽可能适配内容，但Grid容器因子项数量变化，触发了最小宽度的异常计算。
• 解决思路：给Grid容器添加width: fit-content或max-width: max-content，强制其根据内容自适应宽度；或者显式设置Grid容器的固定宽度（如width: 100%、固定像素值），观察是否还会出现宽度变化问题。

内容的提问来源于stack exchange，提问作者Alek