Flex容器内容溢出不滚动的根本原因是默认flex-shrink:1导致子项被压缩，需同时设flex-shrink:0（或flex:0 0 auto）和overflow-x:auto，并限定容器宽度及子项white-space:nowrap。
Flex容器内容溢出时默认压缩子项，不出现滚动条——必须同时控制 flex-shrink 和 overflow 才能触发滚动。
为什么加了 overflow-x: auto 还是不滚动？
常见现象：容器设了 display: flex 和 overflow-x: auto，但子元素被挤扁、文字换行、图片变形，滚动条压根不出现。
根本原因在于 Flex 默认允许子项收缩（flex-shrink: 1），内容“被压缩到不溢出”，自然不会触发滚动。
- 必须给每个子项显式设置
flex-shrink: 0（或等价的flex: 0 0 auto） - 仅靠
width或min-width不够——如果父容器宽度未限定，Flex 仍可能重算主轴尺寸 - 若子项含文字，还需加
white-space: nowrap防止内部折行破坏单行布局
flex-shrink: 0 和 flex: 0 0 auto 有什么区别？
二者效果一致，但写法意图不同：flex-shrink: 0 明确禁用收缩，而 flex: 0 0 auto 是完整 shorthand（flex-grow flex-shrink flex-basis）。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
flex-shrink: 0：语义清晰，避免误设flex-basis导致意外尺寸（比如flex: 0 0 100%在响应式中可能撑满容器） - 慎用
flex: none：它等价于flex: 0 0 auto，但部分旧版 Safari 对none支持不稳定 - 绝对不要只写
flex: 0：这会把flex-grow和flex-shrink都设为 0，但flex-basis变成0%，子项可能直接塌缩
横向滚动 vs 纵向滚动的关键配置差异
方向不同，主轴和溢出属性要同步调整，否则滚动失效或出现双滚动条。
- 横向滚动（子项水平排列）：
flex-direction: row+overflow-x: auto+overflow-y: hidden - 纵向滚动（子项垂直排列）：
flex-direction: column+overflow-y: auto+overflow-x: hidden - 容器必须有明确的宽/高限制（如
width: 300px或max-height: 200px），否则 Flex 会按内容自适应，不触发溢出 - 移动端要注意：iOS Safari 对
overflow-x: auto的触控惯性滚动支持较弱，建议加-webkit-overflow-scrolling: touch（仅限旧版）或确保容器有scroll-behavior: smooth提升体验
嵌套 Flex 滚动时最容易忽略的一点
当 Flex 容器内某个子项自身也要滚动（比如侧边栏+可滚动列表），很多人只在子项上设 overflow-y: auto，却忘了限制它的高度。
结果是：子项高度随内容无限增长，父 Flex 容器被迫拉伸，外部滚动失效。
- 必须给可滚动子项设
height或max-height（例如max-height: calc(100vh - 120px)） - 如果父容器是
flex-direction: column，且希望子项填满剩余空间，可用flex: 1替代固定高度，但前提是父容器本身有明确高度约束（如height: 100vh） - 注意
flex: 1和overflow共存时，某些浏览器（如 Firefox）对min-height: 0有隐式依赖——必要时手动加上
