flex-wrap: nowrap 本身不触发滚动条，需同时满足三条件：父容器有 width/max-width、overflow-x: auto、子项总宽超限；且子项应设 flex-shrink: 0 防压缩；移动端需加 -webkit-overflow-scrolling: touch。
flex-wrap: nowrap 为什么没让容器出现滚动条
设置 flex-wrap: nowrap 只是禁止子项换行，但不会自动触发容器的滚动行为——滚动条是否出现，取决于容器是否有明确的宽度限制，以及子项总宽度是否超出该限制。如果父容器本身能无限撑宽（比如在 body 或未设 width/max-width 的块级元素里），浏览器就不会生成滚动条。
必须同时设置 overflow 和尺寸约束
要让滚动生效，三个条件缺一不可：
- 父容器需有明确的
width或max-width（例如width: 300px） - 父容器需设置
overflow-x: auto（或scroll；overflow: auto也行，但注意它可能同时影响垂直方向） - 子项总宽度必须超过父容器可用宽度（包括 padding、border 等）
常见错误是只加了 flex-wrap: nowrap 和 overflow-x: auto，却忘了给父容器设宽度，结果滚动条根本不会出现。
Flex 容器内子项不收缩导致溢出失效
默认情况下，Flex 子项会尝试收缩（flex-shrink: 1），这可能导致它们被压缩到极窄，反而不触发溢出。如果你希望子项保持固有宽度（如图标、卡片、按钮等），必须显式禁用收缩：
- 给子项加
flex-shrink: 0 - 或简写为
flex: 0 0 auto（即不放大、不缩小、按内容宽） - 避免使用
flex: 1或flex: auto，它们会让子项参与弹性收缩
否则即使总宽度超限，子项也可能被压扁，容器检测不到“需要滚动”的状态。
移动端横向滚动体验差？记得加 touch 支持
在 iOS Safari 和部分安卓浏览器中，仅靠 overflow-x: auto 无法用手指拖拽横向滚动，必须额外加 CSS：
container {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
}
现代 Chrome/Firefox 已默认支持，但 iOS 15 之前仍依赖该属性。漏掉它，用户会发现“有滚动条但拖不动”。
最常被忽略的是：父容器尺寸约束和子项 flex-shrink: 0 必须成对出现，少一个，flex-wrap: nowrap 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
