根本原因是子元素未横向铺开且未真实溢出：必须同时满足内容总宽度＞容器宽度、子元素处于同一行内流（如flex-wrap:nowrap或white-space:nowrap），否则overflow-x:auto无效。
为什么只加 overflow-x: auto 不会横向滚动
根本原因是：浏览器默认把子元素当块级元素垂直堆叠，即使容器设了 overflow-x: auto，内容也没“横向铺开”，自然不溢出、不触发滚动。
必须同时满足两个条件：内部内容总宽度 > 容器宽度，且子元素处于同一行内流中。
- 常见错误是给子项设
width: 100%或max-width: 100%——这会让每个子项强行占满容器宽，结果纵向堆叠，总宽度永远 ≈ 容器宽 - 父容器没加
white-space: nowrap（配合display: inline-block子项）或没用display: flex+flex-wrap: nowrap，子项就会换行 - 子项用了
float或position: absolute，脱离文档流，父容器高度塌陷，scrollWidth计算失准
display: flex 实现横向滚动列表的最小必要配置
Flex 是目前最可控、语义最清晰的方案，但漏掉任意一个关键声明都会失效。
- 父容器必须设：
display: flex+flex-wrap: nowrap+overflow-x: auto - 子项推荐显式设：
flex: 0 0 auto（禁缩放、禁拉伸、按内容定宽），避免 Flex 自动压缩图片/文字卡片 - 移动端务必加：
-webkit-overflow-scrolling: touch（iOS Safari 惯性滚动）和touch-action: pan-x（解除默认pan-y锁定） - 如果子项含长文本或图片，加
min-width: 0防止溢出破坏布局（尤其在flex: 0 0 auto下仍可能被压缩）
隐藏滚动条但保留滚动功能的兼容写法
原生滚动条样式不可跨浏览器统一控制，只能分引擎覆盖；直接 overflow: hidden 会彻底禁用滚动，不能用。
立即学习“前端免费学习笔记（深入）”；
- WebKit（Chrome/Safari）：
container::-webkit-scrollbar { width: 0; height: 0; } - Firefox：
scrollbar-width: none（写在滚动容器上） - IE/Edge 旧版不支持隐藏，但
overflow-x: auto仍有效，无需降级处理 - 隐藏后仍可通过鼠标滚轮、触摸拖拽、
element.scrollLeft编程控制，功能完全保留
横向滚动列表在 iOS Safari 上卡顿/回弹的根本原因
不是性能差，而是 Safari 对横向 touch 滚动做了默认限制：touch-action: pan-y 禁止了水平手势响应。
- 必须给滚动容器显式加：
touch-action: pan-x（注意不要写成pan-x pinch-zoom，后者会干扰双指缩放） - 容器内避免监听
touchstart或touchmove（哪怕空函数），否则触发 passive event warning，强制降级为非平滑滚动 - 若配合
position: sticky或transform动画，可能引发渲染层分离失败，可加will-change: scroll-position强制提升图层 - 真机调试时用 Safari Web Inspector 查 Timeline，频繁 Layout 触发往往意味着某处无意读取了
offsetWidth或getBoundingClientRect()
touch-action 和 min-width: 0 ——它们不常出现在教程里，但在真机上决定成败。 
