要使 overflow-x: auto 正常滚动，必须同时满足：容器设 width 或 max-width；overflow-x: auto；子项设 flex-shrink: 0 或 flex: none；iOS 需加 -webkit-overflow-scrolling: touch 和 scroll-behavior: smooth；首尾触控问题可用 padding-inline 解决。
overflow-x: auto 加了也不滚动？先检查容器有没有被“框住”
直接原因是 overflow-x 只在容器有明确宽度限制时才生效。Flex 容器默认 width: auto，哪怕子项总宽远超屏幕，父容器也会跟着撑开，根本不存在“溢出”——滚动条自然不出现。
必须同时满足三个硬性条件：
-
width或max-width显式设值（例如width: 100%、max-width: 600px） -
overflow-x: auto（比overflow: auto更安全，避免误触垂直滚动） - 子项不能被 Flex 自动压缩：需设
flex-shrink: 0或flex: none
子项被压扁、文字换行、滚不动？flex-shrink: 1 是默认陷阱
Flex 子项默认 flex-shrink: 1，意味着容器一窄，所有子项就会按比例收缩。哪怕你写了 width: 200px，它也可能被压成 60px，结果内容“看起来超了”，实际却没真实溢出——滚动触发不了。
正确做法是统一给子项加：
立即学习“前端免费学习笔记（深入）”；
-
flex-shrink: 0（最直白） - 或简写为
flex: none（等价于flex: 0 0 auto） - 若子项含长文本，再补
min-width: fit-content或具体值（如min-width: 120px），防止单项过宽撑爆布局
iOS Safari 滑不动、卡顿、没惯性？-webkit-overflow-scrolling 和 scroll-behavior 要配齐
iOS Safari（尤其 15 之前）和部分安卓 WebView 默认禁用惯性滚动，overflow-x: auto 只能“推一下、走一步”，体验像拖箱子。
必须加两行：
-
-webkit-overflow-scrolling: touch（旧版必需，新版可省略但建议保留） -
scroll-behavior: smooth（让 JS 的scrollIntoView和手动滑动都更顺）
还要注意：容器不能有 transform、filter 或 will-change，这些会破坏合成层，导致滚动掉帧、卡顿。
首尾点不到、手指滑过就跳空？padding-inline 比 scroll-snap 更可靠
横向滚动栏紧贴屏幕边缘时，手指容易滑过、点不中第一个或最后一个子项。别依赖 scroll-snap-align: center——它只在松手后生效，点击跳转仍需 JS 配合 scrollIntoView。
最简单有效的解法是：
- 给容器加
padding-inline: 16px（或padding-left/padding-right） - 让内容“浮”进可视区，留出触控缓冲区
- 如果用了
scroll-snap-type: x mandatory，确保每个子项设scroll-snap-align: start，否则 snap 会错位
真正麻烦的不是“怎么让它滚”，而是“怎么让它每次都能滚到头、点得准、不抽风”——flex-shrink、flex-wrap: nowrap、-webkit-overflow-scrolling 这些组合缺一不可，漏一个，移动端就大概率失效。
