局部滚动必须设固定高度（height 或 max-height），否则 scrollTop 永远为 0；height: 100% 失效因依赖父元素明确高度，而 Flex 等布局常无高度上下文，导致容器塌陷、无法触发滚动。
局部滚动必须设固定高度（height 或 max-height），否则 scrollTop 永远为 0，滚动条不出现，JS 控制也无效。
为什么 height: 100% 在局部滚动里大概率失效
因为 height: 100% 依赖父元素有明确高度，而多数布局（尤其是 Flex 容器）默认不提供“可继承的高度上下文”。浏览器无法计算出子容器该有多高，“溢出”无从谈起。
- Flex 子项若没加
flex-shrink: 0或显式height/max-height，会被压缩到内容高度，失去滚动前提 - 绝对定位（
position: absolute）元素用height: 100%同样危险——祖先若没设height，结果就是 0 - 推荐改用
max-height: 60vh、height: 400px或flex: 0 0 auto+max-height: 100%（需父级同时设overflow: hidden）
max-height vs height：选哪个更稳妥
max-height 更适合内容长度不确定的场景（如动态列表、日志输出），它允许容器在内容少时自然收缩，只在超限时启用滚动；height 则强制固定尺寸，哪怕内容为空也占满空间。
- 侧边菜单、弹窗正文、消息列表等——优先用
max-height配合overflow-y: auto - 需要严格对齐或动画控制的区域（如轮播描述区、表单预览框）——用
height更可控 - 避免用
min-height替代——它不触发滚动上下文，scrollTop仍为 0
Flex 布局下滚动容器突然“没高度”的修复点
当滚动区嵌在 display: flex 的父容器中，且父容器是 flex-direction: column，子项很容易塌陷。这不是 bug，是 Flex 默认行为。
立即学习“前端免费学习笔记（深入）”；
- 滚动容器的**直接父级**必须有明确高度约束（如
height: 500px或flex: 1） - 滚动容器自身加
flex: 0 0 auto（防拉伸）+max-height: 100%（限高）+overflow-y: auto - 若父级是
flex-direction: row，滚动容器要加align-self: stretch或显式height，否则 Flex 会按内容收缩
真正容易被忽略的是：**滚动是否生效，和你写的 overflow 没有直接关系，只取决于容器有没有“可测量的、非零的、不依赖内容撑开”的高度边界。** 所有“滚动条不显示”“滚不动”“一松手就回弹”的问题，90% 都卡在这一步。先检查 height/max-height，再调样式或 JS。
