局部滚动失效主因是父容器未约束高度或未切断flex撑满行为；需在直接父级设height/max-height/overflow:hidden，滚动容器用overflow-y:auto并避免height:100%。
局部滚动失效，八成是父容器没“封住”高度或没切断 flex 撑满行为——overflow 不是万能开关，它只在有明确边界时才起作用。
为什么给 div 加了 overflow: auto 还是整页滚动？
根本原因是：该 div 的父级（甚至祖先级）没有高度约束，导致它无限撑高，overflow 失去生效前提。
- 常见于 Flex 布局中：父容器设了
display: flex; flex-direction: column;，子元素又用了flex: 1或height: 100%，但没给父容器设具体高度或max-height -
position: absolute或position: fixed元素脱离文档流，其父容器可能无法感知内容高度，overflow也就无从触发 - 使用
min-height而非height或max-height：当内容少时没问题，一多就溢出，因为min-height不限制上限
overflow-y: auto 和 overflow-y: scroll 怎么选？
二者视觉差异小，但行为逻辑不同，选错会破坏布局节奏。
-
overflow-y: auto：仅内容高度超容器时才显示滚动条，更省空间；但 JS 动态插入内容后，浏览器有时不重绘滚动条（尤其 Safari），需手动触发重排，例如el.style.height = el.offsetHeight + 'px' -
overflow-y: scroll：滚动条永远存在，哪怕内容只有一行——它会固定占用约 17px 垂直空间，可能导致容器底部被顶出、对齐错位 - 做数据表格或表单区域时，优先用
auto；需要滚动条“占位”来稳定 UI 高度（比如避免点击展开后页面跳动），才考虑scroll
Flex 布局下局部滚动突然失效的修复点
Flex 容器默认会“尽力撑满”，这是局部滚动最常翻车的场景。
- 必须在滚动容器的**直接父级**上加
overflow: hidden或明确高度（如height: 400px/max-height: 60vh） - 滚动容器自身要设
overflow-y: auto，且不能依赖height: 100%—— 改用flex: 0 0 auto或max-height: 100%（配合父级overflow: hidden才有效） - 若滚动区在
flex-direction: column的子项里，该子项必须加align-self: stretch或显式height，否则 flex 会按内容高度收缩，overflow无处可裁
隐藏原生滚动条但保留滚动功能
不是所有设计都接受默认滚动条样式，但删掉它又怕影响可用性——关键在“隐藏视觉，不废功能”。
- Chrome/Safari：
::-webkit-scrollbar { display: none; }即可，不影响鼠标滚轮和触摸板滑动 - Firefox：
scrollbar-width: none;仅对overflow: auto有效；若用了scroll，此声明会被忽略，滚动条照常显示 - Edge（新版）：同 Chrome，支持
::-webkit-scrollbar - 注意：不要对整个
body或html应用隐藏滚动条，否则用户将无法滚动页面主体
真正卡住人的从来不是 overflow 属性本身，而是它依赖的上下文高度是否被严格定义。Flex、百分比、min-height、绝对定位——这些看似无关的设置，全都在悄悄瓦解 overflow 的生效条件。
