flex子元素不收缩导致overflow: auto失效，根本原因是浏览器默认min-width: auto（横向）或min-height: auto（纵向）锁死最小尺寸，必须在对应flex直接子项显式设置min-width: 0或min-height: 0才能解除限制。
Flex 子元素不收缩，overflow: auto 就是摆设——根本不是滚动条没出来，而是内容根本没被限制住空间。关键在浏览器默认加的 min-width: auto 和 min-height: auto，它们会锁死子项最小尺寸，让 flex-shrink 失效、让 overflow 失效。
为什么 overflow: auto 在 Flex 里常“不生效”
不是 CSS 写错了，是浏览器先按 Flex 规范给子项套了隐形枷锁：
-
min-width: auto（主轴为 row）或min-height: auto（主轴为 column）是 Flex 子项的默认值，它强制子项至少容纳全部内容宽度/高度 - 哪怕你写了
flex: 1或flex-shrink: 1，只要内容固有尺寸 > 可分配空间，收缩就卡在auto这道底线，不会继续压 -
overflow: auto的前提是“容器有明确可计算的剩余空间”，而被撑开的子项让这个空间变成负数或未定义 - 如果子项自己也是
display: flex，那它内部还会再套一层min-height: auto，问题嵌套加深
min-width: 0 或 min-height: 0 必须加在哪一级
不能只加在父容器上，也不能只加在最外层子项上——得加在“真正需要响应 overflow 的那个元素”上：
- 横向布局（
flex-direction: row）：文字/图片/链接等可能撑宽的子项，加min-width: 0 - 纵向布局（
flex-direction: column）：带overflow-y: auto的中间容器（比如一个.content-wrapper），加min-height: 0 - 若该子项本身是
display: flex，且内部还有文本要截断，则还需在其子文本容器上再加一次min-width: 0 - 错误示范：
.parent { min-width: 0; }—— 没用，约束不在父级
flex-shrink: 0 和 min-width: 0 到底用哪个
看你要什么效果，不是互斥，是不同目标：
- 想让子项“坚决不缩”，保持固定尺寸（比如图标按钮、头像），用
flex-shrink: 0或flex: 0 0 auto - 想让子项“能缩、缩得动、缩完还能滚动”，必须用
min-width: 0（横）或min-height: 0（纵）来解除浏览器默认锁 - 两者可以共存：
flex: 1; min-width: 0; overflow: auto;是常见组合 - 只设
flex-shrink: 0却不设min-width: 0，文字仍会撑破容器，text-overflow: ellipsis无效
移动端 overflow-x: auto 滚不动？检查这三点
iOS Safari 和部分安卓 WebView 对水平滚动更敏感，光靠 flex 设置不够：
- 必须加
-webkit-overflow-scrolling: touch（尽管已废弃，但 iOS 仍依赖它启用惯性滚动） - 确保容器没被
transform或will-change干扰合成层，否则滚动区域可能被降级为非硬件加速 - 子项别用
width: 100%或flex-basis: 100%，改用flex: 0 0 auto或固定像素宽，否则 flex 计算会误判剩余空间
最容易被忽略的是：min-height: 0 要加在“滚动容器的直接父级”，而不是滚动内容本身；很多人加在 .content 上，其实该加在包裹它的 .scroll-wrapper 上——那一层才是 Flex 布局中参与高度分配的子项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
