加了flex-wrap: nowrap仍无滚动条，是因为仅禁换行不触发滚动，必须同时满足：父容器有width/max-width、子项设flex-shrink: 0（或flex: 0 0 auto）、子项总宽超限。
为什么加了 flex-wrap: nowrap 还没滚动条
这是最常卡住的地方：仅设 flex-wrap: nowrap 不等于就能滚动。Flex 容器默认会让子项收缩（flex-shrink: 1），哪怕排成一行，也会被压窄以适配容器宽度，结果内容没溢出，overflow-x: auto 就不触发滚动条。
必须同时满足三个条件才真正“撑开”容器：
- 父容器有明确宽度限制（比如
width: 100%、max-width: 400px，不能靠display: flex自动撑满） - 子项明确拒绝收缩（
flex-shrink: 0或flex: 0 0 auto） - 子项真实总宽度 > 父容器可用宽度（不是靠
white-space: nowrap强行撑，而是图片、固定宽 div、min-width等实际尺寸累加超限）
flex: 0 0 auto 和 flex-shrink: 0 用哪个更稳
flex: 0 0 auto 更推荐——它一次性禁掉伸长、收缩、并让基础尺寸按内容定，比单独写 flex-shrink: 0 更少歧义。
但要注意：auto 在含图片或表单控件的子项里可能失效，因为这些元素自带最小尺寸约束。此时要额外加 min-width: 0 来松绑：
立即学习“前端免费学习笔记（深入）”；
.item {
flex: 0 0 auto;
min-width: 0; /* 关键！防止 img/input 死守固有宽 */
}如果子项宽度需统一（如卡片列表），直接写死更可控：flex: 0 0 200px，这样 flex-shrink 计算就有明确依据，Chrome/Firefox 表现也更一致。
iOS Safari 滑不动？别只盯 flex-wrap
加了 flex-wrap: nowrap 和 overflow-x: auto 后，在 iOS Safari 上仍滑不动，大概率是原生滚动行为没激活。
必须补两处：
- 给容器加
-webkit-overflow-scrolling: touch（iOS 16+ 已标为废弃但实测仍必要） - 加
touch-action: pan-x，否则父层手势（比如轮播、下拉刷新）可能拦截横向拖拽
另外检查是否误在某层父容器上写了 overflow: hidden，或者用了 will-change: transform——后者有时反而导致渲染卡顿、滚动失灵。
滚动条看不见 / 拖不了，真不是 Flex 的锅
滚动条不可见、无法拖拽、或只在 hover 才出现，问题几乎都出在 overflow 层级或浏览器策略上，和 flex-wrap: nowrap 本身无关。
常见干扰点：
- 父容器设置了
overflow: hidden（哪怕只是 body 或 layout wrapper） - 用了
scrollbar-width: none或::-webkit-scrollbar { display: none }却忘了兼容 Firefox/IE - 移动端未设
touch-action: pan-x，导致 touchstart 被 JS 事件捕获后阻塞原生滚动
真正容易被忽略的是：Flex 水平滚动对子项尺寸非常敏感——一个没设 min-width: 0 的图片、一个被 max-width: 100% 意外约束的卡片，都可能让整行“塌陷”，滚动就彻底失效。调试时优先检查子项的实际渲染宽度，而不是只看 CSS 规则。
