overflow-x: auto 不滚动的根源是容器未设宽度且子项被 flex-shrink 压缩；需同时满足：显式 width/max-width、overflow-x: auto、子项 flex-shrink: 0；iOS 需加 -webkit-overflow-scrolling: touch；首尾触控问题用 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 的惯性滚动要手动开
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 这三个点漏掉任何一个，真机上立马露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
