根本原因不是 overflow: auto 失效，而是 flex 子元素默认 min-width: auto 或 min-height: auto 锁定收缩底线，必须显式设置 min-width: 0（横向）或 min-height: 0（纵向）才能触发滚动。
直接结论：不是 overflow: auto 失效，是子元素被浏览器默认的 min-width: auto 或 min-height: auto 锁死了收缩底线，必须显式加 min-width: 0（横向）或 min-height: 0（纵向）才能触发滚动。
为什么 flex 子元素设了 overflow: auto 却没滚动条
根本不是 CSS 写错，而是内容压根没“溢出”：Flex 子项默认拒绝压缩到比内容更小，哪怕你写了 flex: 1、max-width: 300px，它也会停在 min-width: auto 这道隐形底线——导致容器剩余空间为负或未定义，overflow 失去触发前提。
- 横向布局（
flex-direction: row）：检查子项 computed 样式里min-width是否仍是auto - 纵向布局（
flex-direction: column）：重点看min-height，尤其当子项自己也是display: flex时，嵌套的min-height: auto会叠加 - 开发者工具里看到滚动区域高度/宽度远大于容器？说明内容根本没被约束住，不是滚动条没出来，是压根没溢出
min-width: 0 和 min-height: 0 必须加在哪一级
不能只加在父容器，也不能只加在最外层包装上——得加在“真正要滚动、且内容可能撑开”的那个元素上。
- 横向滚动场景（比如标签栏）：
文字、图片等内联级内容的直接父容器（通常是.item）加min-width: 0 - 纵向滚动场景（比如列表区）：那个带
overflow-y: auto的中间容器（如.list-scroll）必须加min-height: 0 - 如果该容器本身是
display: flex，且内部还有文本要截断或换行，它的子文本容器（比如<p></p>或<span></span>）还得再加一次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: 1分配空间，min-width: 0解锁收缩，overflow: auto提供滚动出口 - IE11 对
min-height: 0基本忽略，需补height: 0；父容器改用display: -ms-flexbox，避免百分比高度依赖
真正起作用的从来不是 overflow 本身，而是它前面那层看不见的尺寸计算逻辑。漏掉 min-width: 0 或明确的高度/宽度约束，overflow 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
