Material UI React长Typography文本导致Grid列换行如何解决

MUI Grid 基于Flex布局实现，默认Flex子项（即Grid item）的min-width属性值为auto，子项最小宽度完全由内部内容决定，不会主动收缩适配父容器的剩余宽度。
当右侧列的Typography组件加载长文本时，无宽度约束的容器内文本不会主动换行，会把右侧Grid item撑到超出父容器剩余可用宽度，最终触发Flex布局的换行规则，右侧列被直接挤到新行展示。

两种常用实现方式，按需选择即可：

• 方案1：显式配置栅格占比（官方推荐用法）
  给左右两个Grid item配置断点对应的栅格占比，MUI会自动给对应项加上宽度约束与Flex收缩属性，长文本会自动在分配的宽度范围内换行。
  修复后参考代码：

  <Grid container justifyContent="space-around">
    {/* 左侧图片列，栅格占比可根据业务需求调整 */}
    <Grid item xs={4}>
      <img src={cta} alt="call to action" style={{ maxWidth: "100%" }} />
    </Grid>
    {/* 右侧文本列分配剩余宽度 */}
    <Grid item xs={7}>
      <Grid container direction="column">
        <Grid item>
          <Typography variant="h1">Header right side</Typography>
        </Grid>
        <Grid item>
          <Typography variant="body1">
            Lorem insectetur adipisicing elit. Earum commodi inventore, nisi
            corruLorem insectetur adipisicing elit. Earum commodi inventore,
            nisi corruLorem insectetur adipisicing elit. Earum commodi
            inventore, nisi corru
          </Typography>
        </Grid>
      </Grid>
    </Grid>
  </Grid>
  

  注意：使用栅格占比方案时，务必给列内部的图片、视频等媒体元素加上maxWidth: 100%样式，避免素材原始尺寸过大撑破列宽。

• 方案2：手动覆盖最小宽度规则（自适应宽度场景用）
  如果不需要固定栅格占比，想让列宽随内容自适应，可以给承载长文本的右侧Grid item添加minWidth: 0样式，覆盖Flex默认的min-width: auto限制，文本就会在可用宽度内自动换行，不会撑破列触发换行。
  修复后参考代码：

  <Grid container justifyContent="space-around">
    <Grid item>
      <img src={cta} alt="call to action" />
    </Grid>
    {/* 加minWidth:0 解除内容最小宽度撑开限制 */}
    <Grid item sx={{ minWidth: 0 }}>
      <Grid container direction="column">
        <Grid item>
          <Typography variant="h1">Header right side</Typography>
        </Grid>
        <Grid item>
          <Typography variant="body1">
            Lorem insectetur adipisicing elit. Earum commodi inventore, nisi
            corruLorem insectetur adipisicing elit. Earum commodi inventore,
            nisi corruLorem insectetur adipisicing elit. Earum commodi
            inventore, nisi corru
          </Typography>
        </Grid>
      </Grid>
    </Grid>
  </Grid>
  

内容的提问来源于stack exchange，提问作者sir-haver