移动端overflow-x:scroll配合flex-wrap时水平滚动异常如何解决

flex-wrap: wrap的默认渲染逻辑是：当子元素总宽度超过容器可用宽度时，优先将超出的子元素折到下一行排列，而非保留子元素尺寸触发横向滚动。移动端视口宽度远小于桌面端，固定宽度的子元素会被flex自动折成3行甚至更多行，撑高容器高度触发垂直滚动，横向滚动自然失效——这是属性本身的设计逻辑，不是浏览器bug。

不需要移除多行排列能力，两种方案都可以实现固定2行布局+全端一致的横向滚动效果： #

方案1：Flex 布局适配（兼容所有浏览器） #

保留原有flex-wrap属性，通过限制容器高度、锁定子元素尺寸强制触发横向滚动，核心代码如下：

/* 滚动容器 */
.scroll-box {
  display: flex;
  flex-wrap: wrap;
  /* 手动设置容器高度，值 = 2*单个子元素高度 + 上下间距 + 行间距 */
  height: calc(2 * 100px + 24px);
  overflow-x: auto;
  /* 禁止垂直方向滚动，避免折行后撑高容器 */
  overflow-y: hidden;
  /* 让折行的内容从顶部开始排列，避免垂直方向分散留空 */
  align-content: flex-start;
  /* 移动端优化：开启惯性滚动 */
  -webkit-overflow-scrolling: touch;
}
/* 内部子元素 */
.scroll-item {
  /* 核心：禁止子元素被flex压缩，锁定尺寸 */
  flex: 0 0 auto;
  width: 160px;
  height: 100px;
  margin: 8px;
}

实现逻辑：把容器高度卡死为刚好容纳2行元素的尺寸，就算flex想把元素折到第三行也没有垂直空间，配合overflow-y: hidden裁切垂直方向溢出内容，flex就不会持续向下折行占垂直空间；子元素设置flex: 0 0 auto后不会随容器宽度收缩，总宽度超出容器时自然触发横向滚动，移动端和桌面端表现完全一致。 #

方案2：Grid 布局实现（代码更简洁） #

如果不需要兼容IE等老旧浏览器，用CSS Grid实现更简单，不需要手动计算容器高度：

.scroll-box {
  display: grid;
  /* 固定2行布局 */
  grid-template-rows: repeat(2, 1fr);
  /* 元素按横向顺序排列，不自动折行压缩宽度 */
  grid-auto-flow: column;
  /* 单个子元素的固定宽度 */
  grid-auto-columns: 160px;
  /* 元素之间的间距 */
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.scroll-item {
  height: 100px;
}

这个方案从布局逻辑上就规避了flex-wrap自动折行的问题，直接指定容器为2行、横向排列的结构，子元素超出容器宽度时自动触发横向滚动，不需要额外处理折行逻辑。

• 子元素不要设置百分比宽度，否则会被自动压缩，导致总宽度永远不超过容器宽度，横向滚动失效
• 计算容器高度时要把子元素的margin、border尺寸算进去，否则会因为高度不够裁切第二行元素，或者高度过大出现垂直滚动
• 如果需要隐藏默认滚动条样式，可以追加对应CSS代码，不影响滚动功能

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