React中MUI Grid如何防止网格项换行 实现小屏横向滚动

• MUI Grid 容器默认开启flex-wrap: wrap，视口宽度不足时会自动把列元素折到下一行排布
• 原有栅格结构逻辑错误：把全部卡片内容嵌套在单个Grid item内部，没有为每个卡片创建独立的栅格子项，5列的布局结构从根上就没有搭建完成
• 容器样式存在冲突：先设置的overflowX: "hidden"会被后续写的overflow: "auto"覆盖，横向滚动的行为没有被正确定义，也没有处理MUI Grid间距带来的边缘负边距问题

• 关闭容器自动换行能力
  给Grid container组件传入wrap="nowrap"属性，强制所有子项保持单行排布，这是实现单行布局的核心开关
• 修正滚动样式配置
  移除冲突的overflow定义，明确设置overflowX: "auto"开启横向滚动能力，垂直方向滚动按内容溢出情况自然触发；额外给容器加小尺寸内边距，抵消MUI Grid通过负外边距实现spacing的副作用，避免滚动到最边缘时卡片贴边丢失间距
• 修正栅格子项逻辑
  将卡片的map循环移动到Grid item层级，让每个卡片对应一个独立的栅格子项；给每个Grid item加上flexShrink: 0样式，关闭子项自动压缩的能力，避免单行排布时所有卡片被强行挤窄变形
  *注意：MUI Grid 默认的栅格占比是基于0-12的整数断点规则计算的，之前代码里写的xs={2.1}这种小数占比在nowrap场景下会触发宽度计算逻辑异常，不建议在这类固定单行布局中使用断点占比，直接通过弹性属性控制宽度即可

<Grid
  container
  spacing={2}
  wrap="nowrap"
  style={{
    height: "440px",
    maxHeight: "100vh",
    overflowY: "auto",
    overflowX: "auto",
    padding: "8px",
  }}
>
  {cards.map((card) => (
    <Grid 
      item 
      style={{ flexShrink: 0 }}
    >
      <Card props={card} />
    </Grid>
  ))}
</Grid>

如果需要固定卡片宽度实现统一的5列等宽效果，可以给每个Grid item追加固定宽度值（比如width: "200px"），搭配flexShrink: 0属性，就能实现小屏下不折行、仅通过横向滚动查看全部列的效果。

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