Flex子项overflow-y: auto不滚动的根本原因是高度塌陷，需确保父级有height/max-height约束、子项用flex:1而非height:100%、并显式设置min-height:0以启用滚动。
Flex 子项设了 overflow-y: auto 却不滚动？先查高度是否塌陷
Flex 布局里，子项默认会“被拉伸”或“被压缩”，overflow-y: auto 生效的前提是它真有可滚动的区域——也就是自身高度必须明确且内容超出了它。
常见现象：滚动条不出现、scrollTop 始终为 0、内容直接溢出容器下方。
根本原因几乎都是高度塌陷，尤其当父级是 display: flex 且没做约束时。
必须检查以下三点：
- 滚动容器的**直接父级**是否设置了
height或max-height（如height: 400px或max-height: 60vh），或者加了overflow: hidden阻断高度传递 - 滚动容器自身不能只靠
height: 100%——改用flex: 0 0 auto或max-height: 100%（后者需配合父级overflow: hidden才有效） - 若滚动区在
flex-direction: column的子项中，该子项要加align-self: stretch或显式height，否则 Flex 会按内容收缩，overflow失效
自适应高度 + 滚动：用 flex: 1 而不是 height: 100%
flex: 1 是 Flex 布局中实现“填满剩余空间”的标准方式，比 height: 100% 可靠得多——后者依赖父级高度明确，而 Flex 容器的高度常由内容动态决定。
典型结构（如 header + content + footer）：
- 父容器设
display: flex; flex-direction: column; min-height: 100vh -
.header和.footer设固定高度（如height: 60px）或由内容撑开（加flex-shrink: 0） -
.content设flex: 1; overflow-y: auto; min-height: 0——min-height: 0很关键，它覆盖了 flex item 默认的min-height: auto，防止内容撑开容器
动态头部高度下怎么让内容区自动滚动？别硬编码 height
当 header 高度不可预知（比如多行文字、响应式字号变化），就不能写死 height: calc(100vh - 80px) 这类值。Flex 的语义化能力正好解决这个问题。
只需两步：
- 把整个区块（含 header 和 content）设为
display: flex; flex-direction: column -
.header不设高度，加flex-shrink: 0防被压缩；.content加flex: 1; overflow-y: auto; min-height: 0
这样 header 完全由内容决定高度，content 自动占满剩余空间，且滚动行为稳定——无需 JS 计算、不依赖 getBoundingClientRect()、也不怕换行或字体缩放。
为什么加了 flex: 1 还是滚不了？检查 min-height: 0
这是最容易被忽略的一环。Flex item 默认有 min-height: auto，意思是它宁可撑大容器，也不愿缩小到内容之下。结果就是：即使你写了 flex: 1 和 overflow-y: auto，浏览器仍优先扩展高度，滚动永远不会触发。
修复方法非常简单，在滚动容器上加一行：
min-height: 0;
它告诉 Flex：“允许我缩小到 0，哪怕内容超了，也请启用滚动”。没有这句，flex: 1 + overflow 组合大概率失效，尤其在嵌套 Flex 或内容动态插入时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
