flex容器overflow-x: auto不生效的根本原因是子项默认flex-shrink导致内容被压缩而无溢出；需设flex-shrink: 0（或flex: 0 0 auto）、明确容器宽度、white-space: nowrap及显式flex-wrap: nowrap。
flex 容器设了 display: flex 但 overflow-x: auto 不生效？
根本原因是：默认情况下，flex 容器的子项会主动收缩（shrink）以适应容器宽度，导致内容被压缩、不触发滚动。即使你加了 overflow-x: auto，也没有“溢出”可滚。
- 给子项加
flex-shrink: 0阻止压缩（最常用） - 确保父容器有明确宽度（比如
width: 100%或固定值），否则 flex 容器可能无限宽 - 别漏掉
white-space: nowrap（对文字类子项尤其关键，防止换行“吃掉”溢出）
为什么 flex-wrap: nowrap 是必须的？
flex 默认是 flex-wrap: nowrap，看起来不用写——但一旦父级或重置样式里改过它（比如全局设了 flex-wrap: wrap），子项就会换行，彻底破坏水平滚动逻辑。
- 显式声明
flex-wrap: nowrap更可靠 - 只对直接子项起作用；嵌套 flex 不影响外层滚动行为
- 如果误用了
wrap，overflow-x就完全失效——因为内容已垂直铺开，没横向溢出
完整可用的最小代码结构
.scroll-container {
display: flex;
overflow-x: auto;
width: 100%; /* 关键：限定容器宽度 */
flex-wrap: nowrap; /* 关键：禁止换行 */
gap: 8px; /* 可选，但推荐 */
}
<p>.scroll-container > <em> {
flex: 0 0 auto; /</em> 等价于 flex-shrink: 0 + flex-grow: 0 + flex-basis: auto <em>/
min-width: 0; /</em> 防止某些内联元素（如 img）撑宽 */
}注意：flex: 0 0 auto 比单独写 flex-shrink: 0 更稳妥，它同时禁用拉伸和强制设宽逻辑。
移动端滚动卡顿或无法拖拽？加这三行
iOS Safari 和部分安卓 WebView 对 overflow-x: auto 的 touch 支持较弱，需手动启用惯性滚动。
立即学习“前端免费学习笔记（深入）”；
-
-webkit-overflow-scrolling: touch（iOS 必加，已废弃但仍必要） -
scroll-behavior: smooth（可选，提升体验） - 确保容器没有
transform或will-change干扰合成层（常见卡顿源头）
复杂点往往不在 flex 设置本身，而在子项是否真正“拒绝收缩”——比如一个 <img> 默认会缩放，一个 <span> 包着长文本却没设 white-space: nowrap，都会让滚动悄无声息地失效。
