flex-nowrap 仅禁止换行，不启用滚动；需配合 overflow-x: auto 和明确宽度限制，且子项设 flex-shrink: 0 防压缩，iOS 还需 -webkit-overflow-scrolling: touch 和 touch-action 优化。
flex-nowrap 为什么不能直接让内容横向滚动
加了 flex-nowrap 只是禁止换行，不是开启滚动——容器依然会把所有子项强行挤在一行内撑宽，父容器不会自动出现滚动条。真正起作用的是 overflow-x: auto 和明确限制容器宽度（比如 width 或 max-width）。
- 常见错误现象：
display: flex; flex-wrap: nowrap;写了，但内容溢出不可滑动，控制台也没报错 - 必须同时设置：
overflow-x: auto（或scroll），且父容器不能是width: fit-content或未设宽的display: inline-flex - 移动端要注意：
overflow-x: auto在 iOS Safari 里默认不触发惯性滚动，得加-webkit-overflow-scrolling: touch
子项 flex-shrink 导致宽度被压缩，滑不动
默认所有 flex 子项都有 flex-shrink: 1，当容器宽度不够时，它们会主动缩小，甚至缩到看不见，看起来像“卡住”或内容消失。
- 典型表现：横向滚动条出现，但拖动后内容几乎没变化，或者文字被压成一条线
- 解决方法：给子项加
flex-shrink: 0，确保它们不收缩；如果需要等宽自适应，改用flex: 0 0 auto - 别只写
flex: 1——它等价于flex: 1 1 0，flex-shrink: 1依然生效
滚动条样式难看且占空间，怎么隐藏又保留功能
原生滚动条默认占用空间、样式丑、iOS 上还可能遮挡内容。隐藏它不能靠 display: none，那会直接禁用滚动能力。
- 安全隐藏方案：用
scrollbar-width: none（Firefox） +::-webkit-scrollbar { display: none }（Chrome/Safari） - 注意兼容性：
scrollbar-width在旧版 Firefox 不支持；WebKit 伪元素只对overflow容器生效，且必须有真实滚动行为（不能靠height: 0强撑） - 留白技巧：加
padding-bottom: 1px或margin-bottom: -1px防止因滚动条消失导致布局跳动
touchmove 事件干扰导致 iOS 滑动卡顿
如果容器里绑了 touchstart/touchmove（比如手势识别、拖拽逻辑），很容易阻止浏览器默认滚动行为，结果就是手指划过去没反应，或滑两下就停。
立即学习“前端免费学习笔记（深入）”；
- 检查是否写了
event.preventDefault()在未满足条件的touchmove里 - 推荐做法：只在明确要拦截时调用
preventDefault()，并加上{ passive: false }；其他情况用{ passive: true }（默认值）提升响应速度 - 更稳妥的替代：用
CSS touch-action: pan-y禁止竖向拖拽，允许横向滚动，比 JS 拦截更轻量、更可靠
