flex容器实现水平滚动需同时满足：①设flex-wrap: nowrap；②容器有明确宽度限制；③子项总宽超容器且flex-shrink: 0；④overflow-x: auto。缺一不可。
flex容器设为水平滚动需要同时满足哪些条件
仅给 flex 容器加 overflow-x: auto 是不够的，浏览器默认会把子项压缩换行来避免溢出。必须显式阻止换行 + 限定容器宽度 + 允许内容超出才生效。
-
display: flex容器需设置flex-wrap: nowrap（这是默认值，但显式写出更稳妥） - 容器必须有明确的宽度限制（如
width: 300px或max-width: 100%），否则它会自动撑开容纳所有子项 - 子项总宽度需超过容器宽度——不能靠
white-space: nowrap或文本强制不换行来“凑”溢出，得是真实尺寸溢出 -
overflow-x: auto或scroll才能触发横向滚动条；overflow: hidden会直接裁剪
为什么加了 overflow-x 还不出现滚动条
最常见原因是子项被 flex 自动压缩（shrink）了。即使设置了 flex-wrap: nowrap，只要子项的 flex-shrink: 1（默认值），它们就会缩小以适应容器宽度。
- 解决方法：给子项统一加
flex-shrink: 0，禁止压缩 - 或者用
flex: 0 0 auto（即flex-grow: 0,flex-shrink: 0,flex-basis: auto） - 如果子项是图片或带固定宽高的块，还要确认没被父级
max-width: 100%意外约束 - 检查是否误设了
overflow: hidden在某层父容器上，导致滚动被截断
移动端 touch 滚动不流畅怎么办
纯 CSS 的 overflow-x 在 iOS Safari 和部分安卓 WebView 中默认禁用惯性滚动，需手动启用。
- 给容器加
-webkit-overflow-scrolling: touch（仅 Safari 有效，已废弃但目前仍必要） - 现代写法应补充
scroll-behavior: smooth和overscroll-behavior-x: contain防止滚动穿透 - 避免在滚动容器内使用
position: fixed子元素，它可能破坏滚动层级或触发重绘卡顿 - 若滚动卡顿明显，可尝试加
will-change: scroll-position或用transform: translateZ(0)触发 GPU 加速（慎用，可能引发其他渲染问题）
滚动条样式怎么自定义又不影响布局
CSS 自定义滚动条只能通过伪元素实现，且仅支持 WebKit 内核（Chrome/Safari/Edge），Firefox 不支持。
立即学习“前端免费学习笔记（深入）”；
- 隐藏原生滚动条但保留功能：
&::-webkit-scrollbar { display: none; } - 仅隐藏滚动条轨道、保留 thumb（拖拽块）：
&::-webkit-scrollbar-track { background: transparent; } - 修改 thumb 颜色和圆角：
&::-webkit-scrollbar-thumb { background: #999; border-radius: 6px; } - 注意：所有伪元素选择器必须写在容器自身规则内，且不能用
!important覆盖系统默认行为 - 自定义后务必在真机测试，某些 Android 系统会忽略部分样式或导致滚动失效
overflow-x 单独一行，而在于 flex 项是否真正“撑出去”——flex-shrink: 0 和容器宽度限制这两步漏掉任何一环，滚动就只是个摆设。 
