父容器设overflow: hidden却仍可滚动，是因为其未设height/max-height导致被子项撑开而无实际溢出；必须为父容器设明确高度，并在flex子项加min-height: 0才能使overflow生效。
为什么父容器设了 overflow: hidden，子容器还是能滚？
不是样式没生效，而是父容器根本没“溢出”——overflow: hidden 只对超出其边界的内容起作用。如果父容器是 display: flex 且没设 height 或 max-height，它会被子项撑开，实际尺寸永远 ≥ 内容高度，自然没有溢出，overflow: hidden 就形同虚设。
常见现象：给 .wrapper 加了 overflow: hidden，但里面一个 display: flex; flex-direction: column 的 .list 依然拖出滚动条。
- 检查父容器是否真有明确高度约束（比如
height: 400px、max-height: 100vh，或通过整条 flex 链路传下来） - 确认子容器是否用了
flex: 1却没配min-height: 0，导致它拒绝收缩，把父容器顶高 - 用 DevTools 的 Computed 面板看父容器的最终
height和scrollHeight，差值为 0 就说明没溢出
overflow-y: auto 加在 flex 容器上为什么没反应？
因为 flex 子项默认会撑开容器，而 overflow-y: auto 只在内容高度 > 容器高度时才激活。如果容器没被定高，它就一直跟着内容长，永远不满足“溢出”条件。
- 外层必须有明确高度：比如
html, body { height: 100%; }+.app { height: 100vh; display: flex; flex-direction: column; } - 要滚动的区域不能是 flex item 本身，得额外包一层：
<div class="scroll-area"></div> - 这层包裹必须加
min-height: 0（修复 Chrome/Firefox 中 flex 子项最小尺寸计算 bug） - 别把
overflow-y: auto直接加在flex: 1的元素上——它会让整个布局区滚动，而不是仅内容区
嵌套 flex 中谁该加 min-width: 0 或 min-height: 0？
这两个值不能互换，必须加在“直接父容器”上，即那个既用了 flex、又承载了可能溢出内容的中间层。
立即学习“前端免费学习笔记（深入）”；
-
min-width: 0用在flex-direction: row的父容器上，防止含长文本、URL 或未约束图片的子项强行撑宽整行 -
min-height: 0用在flex-direction: column的 flex item 上（比如.content-wrapper），让它能真正收缩，腾出空间给内部overflow-y: auto - 漏加其中任意一个，都可能导致横向/纵向莫名滚动条，尤其在小屏或动态内容场景下
- textarea、img、iframe 等元素也要单独处理：
textarea必须设display: block+width: 100%+height: 100%；图片必须加max-width: 100%+height: auto
怎么避免把整个 flex 布局卷进去滚动？
90% 的滚动错位，源于把 overflow-y: auto 错加在 flex 容器本身。这会让标题、按钮、分隔线一起滚动，违背“仅内容区可滚”的设计本意。
- 正确结构是分层：flex 容器负责整体流式占位，滚动能力由内层独立容器承担
- 例如：
.container（column, 100vh）→.header（固定高）→.main（flex: 1）→.scroll-area（overflow-y: auto+min-height: 0）→.list（真实内容） - 滚动区域必须与布局容器解耦：哪怕只有一处需要滚动，也值得多套一层 div
- 移动端要注意
-webkit-overflow-scrolling: touch，否则 iOS 滚动卡顿
min-height: 0，或错放一次 overflow，问题就会在某个特定内容长度或屏幕宽度下突然冒出来。 
