flex容器内容不滚动的根本原因是浏览器未触发溢出逻辑，需设置height/max-height约束容器高度、将overflow-y: auto加在独立滚动层（非flex: 1元素本身）、该层须设min-height: 0，并确保父级高度链完整，ios还需-webkit-overflow-scrolling: touch。
Flex容器内容不滚动，不是CSS写错了，而是浏览器根本没触发溢出逻辑——它优先压缩子项或撑开容器，而不是显示滚动条。
flex-direction: column 时 overflow-y: auto 没反应
垂直滚动失效，90%是因为容器没高度约束，子项直接把父容器顶高了。
- 必须给容器设
height或max-height（比如max-height: 400px或height: 100vh） -
overflow-y: auto要加在容器上，不能只加在子元素上 - 如果容器是
flex: 1，它的父级链（html→body→ 所有中间层）都得有明确高度，否则flex: 1等于无效 - 临时加
border: 1px solid red看容器是否真有高度，比猜更可靠
flex-direction: row 时 overflow-x: auto 滚不动
横向滚动卡住，往往不是 overflow 写错，而是子项被 Flex 默认收缩机制压扁了。
- 每个子项必须加
flex-shrink: 0，否则它们会主动缩小，永远不溢出 - 容器必须有明确的
width或max-width（比如width: 300px），否则它会无限撑宽 - 子项含文字时，加
white-space: nowrap防止内部换行掩盖溢出 - 别用
flex: 1或flex: 0 0 auto替代flex-shrink: 0——前者可能误设flex-basis导致尺寸异常
嵌套 Flex 中滚动区域高度塌陷
子项用了 flex: 1 却不滚动，常见于侧边栏+列表这类结构，问题出在“占位”和“滚动”混在同一个元素上。
- 不要把
overflow-y: auto直接加在flex: 1的子项上；它会撑高自身，破坏父容器布局 - 正确做法：用一层 wrapper 包住内容，比如
.list-wrapper { flex: 1; }+.list-scroll { overflow-y: auto; min-height: 0; } -
min-height: 0是关键，修复 Chrome/Firefox 对 Flex 子项最小高度的计算 bug - iOS Safari 还需补
-webkit-overflow-scrolling: touch，否则触控滚动卡顿
真正卡住人的地方，从来不是 overflow 属性本身，而是 Flex 的默认行为（flex-shrink: 1、内容撑高、高度链断裂）和尺寸约束之间的隐式冲突。漏掉其中任意一环，滚动就静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
