必须给直接包裹滚动区域的Flex容器加overflow: hidden并给其Flex子项设min-height: 0，否则滚轮事件会穿透至外层甚至body；仅设内层overflow-y: auto无效。
为什么滚轮一动就跳到外层容器？
这不是浏览器 bug，而是嵌套滚动区域没有明确“捕获优先级”：当鼠标悬停在内层可滚动区（比如一个 .list-scroll）上时，如果它没占满父容器可用高度，或者父容器未设 overflow: hidden，滚轮事件会穿透到外层 Flex 容器甚至 body，导致整页滚动或跳转错位。
必须给外层 Flex 容器加 overflow: hidden
这是最常被跳过的一步。仅靠内层设 overflow-y: auto 不够——若外层容器（如 .container { display: flex; flex-direction: column; height: 100vh; }）没加 overflow: hidden，浏览器仍会把内层溢出“上报”给祖先链，最终由 body 接管滚动。
-
overflow: hidden必须加在**直接包裹滚动区域的 Flex 容器**上，通常是height: 100vh或max-height那一层 - 不能只加在
html或body上；它们不参与 Flex 尺寸计算，起不到截断作用 - 加了之后，内层
overflow-y: auto才真正“拥有”滚轮焦点，不会被穿透
min-height: 0 要加在滚动容器的直接父 Flex item 上
例如结构：.main { flex: 1; } 包着 .scroll-area { overflow-y: auto; }，那么 min-height: 0 必须加在 .main 上，而不是 .scroll-area 本身。
- 原因：Flex 子项默认
min-height: auto，会阻止自身收缩，导致.main实际高度 > 可用空间，.scroll-area根本没机会触发溢出 - 加在
.main上后，它才能真正“让出”高度，让.scroll-area在受限空间内计算滚动 - 如果
.main内还有嵌套 Flex（如头像+文字行），那内层也要加min-height: 0，否则溢出会“顶穿”出来
避免滚动容器自身设 height: 100%
给 .scroll-area 写 height: 100% 是危险操作——它会脱离 Flex 布局的高度分配逻辑，强行拉伸并破坏父级 flex: 1 的行为。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是让它依赖父 Flex item 分配后的剩余空间，只设
overflow-y: auto和min-height: 0 - 若需最小高度兜底，用
min-height: 0+flex: 1组合，而非height - 临时调试时，加
border: 1px solid red看.main是否真有高度，比猜更准
真正卡住的点往往不在滚动声明本身，而在外层容器是否“关严了门”、中间层是否“松开了锁”。漏掉 overflow: hidden 或 min-height: 0 中任意一个，滚轮都会继续乱跳。
