Flex子项overflow:auto无滚动条，根本原因是浏览器默认min-width:auto或min-height:auto锁死收缩底线；必须在直接内容容器上显式设min-width:0（横向）或min-height:0（纵向），并配合父容器高度约束、正确嵌套结构及移动端兼容处理。
flex子项设了overflow:auto却没滚动条
不是CSS写错了，是浏览器给子项加了默认锁：min-width: auto（横向）或min-height: auto（纵向），它卡死了收缩底线。哪怕你写了flex: 1、max-height: 300px，内容一多，子项就直接撑开，根本不会“溢出”，滚动条自然没触发条件。
用开发者工具看 computed 样式：min-width 或 min-height 还是 auto？那就是问题所在。
- 横向布局（
flex-direction: row）：给要滚动的子项加min-width: 0 - 纵向布局（
flex-direction: column）：加min-height: 0 - 别只加在父容器上——必须加在“真正装内容、且内容可能撑开”的那层元素上
overflow-y:auto加在flex:1元素上就是错的
把 overflow-y: auto 直接写在 flex: 1 的元素上，会导致整个布局区跟着滚动，而不是仅内容区。更糟的是，它常因未解除 min-height: auto 而完全不生效。
正确结构得拆两层：
- 外层（如
.list-wrapper）负责占位：flex: 1，不设overflow - 内层（如
.list-scroll）负责滚动：overflow-y: auto; min-height: 0; - 最内层（如
.list-content）只管装内容，不设高度、不设 overflow
漏掉 min-height: 0，Chrome/Firefox 就会算错可用空间，滚动条消失。
父容器没高度，overflow就形同虚设
overflow: hidden 或 auto 只对“超出自身边界”的内容起作用。如果父容器是 display: flex 却没设 height 或 max-height，它会被子项一路撑高，永远没有“溢出”——滚动条当然不会出现。
- 整条 Flex 链路都得有高度约束：比如
html, body { height: 100%; }+.app { height: 100vh; display: flex; } - 移动端 Safari 还要额外加
-webkit-overflow-scrolling: touch，否则拖不动 - IE11 不认
min-height: 0，得写成height: 0; min-height: 0;
长文本/URL撑宽导致横向滚动失效
Flex 子项里放长 URL、base64 字符串或未约束图片时，overflow-x: auto 常不出现，根本原因是容器没被“框住”：Flex 容器默认 width: auto，子项再宽，它也跟着撑开。
- 父容器必须显式设
width或max-width（比如width: 100%） - 子项加
flex-shrink: 0或flex: 0 0 auto防止被压缩 - 文字类子项还得配
white-space: nowrap，否则换行就没了溢出需求 - 若子项自己也是
display: flex，它的子文本容器（如）还要再加一次min-width: 0
这些限制点分散在不同层级，漏掉任意一个，滚动行为就可能在小屏或动态内容下突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
