根本原因是父容器无明确高度约束且flex子项默认min-height:auto/min-width:auto阻止收缩，需在直系子项加min-height:0或min-width:0解除锁定，并分层设置overflow-y:auto于包裹层而非外层flex容器。
overflow: hidden 为什么在 Flex 嵌套里经常失效
根本原因不是 overflow: hidden 写错了，而是它没生效的条件被悄悄触发了：父容器没有明确高度约束，导致子项撑开整个容器，压根不存在“内容溢出”，overflow: hidden 就形同虚设。
常见现象包括：给外层 .wrapper 设了 overflow: hidden，但内部 .list 仍横向/纵向滑出；或者滚动条出现在意料之外的位置（比如整个页面可滚，而不是局部）。
- Flex 子项默认
min-height: auto（垂直布局）或min-width: auto（水平布局），会优先保障内容完整显示，不主动收缩 - 如果父容器靠内容撑高（例如没设
height、max-height或flex: 1但缺少约束），浏览器就认为“没溢出”，overflow不介入 - 嵌套多层 flex 时，每一层都可能因未设
min-height: 0或尺寸限制，把溢出“传导”上去
min-height: 0 是什么，为什么它常比 overflow: hidden 更关键
min-height: 0 不是“让元素变矮”，而是显式覆盖 flex 项的默认行为 min-height: auto，告诉浏览器：“这个元素可以压缩到 0 高度，别再死守内容高度了”。只有这样，flex-grow: 1 才能真正分配剩余空间，滚动区域才不会被撑爆。
- 必须加在直系 flex 子项上，比如
.content（它是display: flex; flex-direction: column的直接子元素） - 若该子项内部还有 flex 布局（如头像+文字行），那内层也要加
min-height: 0，否则溢出会“穿透”出来 - 不能只写
overflow: hidden代替 —— 它虽能间接触发 BFC 并重置最小尺寸，但可能意外裁剪阴影、动画、position: absolute子元素等 - 兼容性好，所有现代浏览器及 IE11+ 都支持
滚动区域该套在哪一层？常见错误写法
把 overflow-y: auto 直接加在最外层 flex 容器上，是最典型的误用。这会让整个布局区变成一个滚动体，而不是仅滚动中间列表或内容区。
- 正确分层：外层 flex 容器负责整体结构（
display: flex; flex-direction: column; height: 100vh），头部/底部用flex: 0 0 auto，中间区域用flex: 1 1 0并额外包裹一层<div class="scroll-area"> <li>滚动样式只加在包裹层：<code>.scroll-area { overflow-y: auto; min-height: 0; }——min-height: 0这里不可省，否则 flex 计算会卡住 - 避免给包裹层设
height: 100%，它依赖父级 flex 分配后的可用空间，硬写 height 可能和 flex 行为冲突 - 移动端 iOS Safari 上，可加
-webkit-overflow-scrolling: touch提升滚动流畅度，但注意它会让position: fixed子元素错位 -
min-width: 0加在需要收缩的 flex 项上（如.title），不是父容器 -
white-space: nowrap（单行）或overflow-wrap: break-word（多行）控制换行逻辑 -
overflow: hidden裁剪溢出内容（注意：只对块级元素生效） -
text-overflow: ellipsis渲染省略号（仅对white-space: nowrap+overflow: hidden组合有效） - 容器需有明确宽度上下文（flex 布局中，
min-width: 0已提供，无需额外设 width）
文本截断和横向溢出为什么总不生效
很多人以为加了 min-width: 0 文字就会自动省略，其实这只是“解锁收缩权限”，后面三步缺一不可，且必须写在同一元素上。
min-height: 0 或 min-width: 0，溢出就可能从那个缝隙里钻出来。
