Flex嵌套滚动条冲突的核心是尺寸约束未传递且收缩被默认锁定，需在直接父容器设min-width:0（row）或min-height:0（column），并分层隔离滚动区域。
Flex嵌套滚动条冲突不是“多加几个overflow就能解决”的问题，核心在于尺寸约束没传下去、收缩行为被默认锁定，导致溢出无法被正确识别和截断。
为什么min-width: 0和min-height: 0必须加在直接父容器上
Flex子项默认有min-width: auto（横向布局）或min-height: auto（纵向布局），意思是“至少要撑开到内容高度/宽度”，它会阻止收缩，哪怕父容器已设flex: 1或height: 100vh。
-
min-width: 0只对flex-direction: row的父容器有效，防止长单词、URL或未约束图片横向撑爆整个流 -
min-height: 0只对flex-direction: column的直接子项有效，比如.content-area这类需要内部滚动的区域 - 加在最外层或最内层都无效——必须是那个“既用了
display: flex，又承载了可能溢出内容”的中间层 - 如果该层内部还有嵌套Flex（如头像+文字行），那内层也要加
min-height: 0，否则溢出会“穿透”出来
滚动区域不能套在Flex容器本身上
把overflow-y: auto直接加在display: flex容器上，是最常见的误用。它会让标题栏、按钮、页脚一起滚动，违背“仅内容区可滚”的设计意图。
- 正确做法是分层：外层Flex只负责结构（
display: flex; flex-direction: column; height: 100vh），头部/底部用flex: 0 0 auto - 中间区域用
flex: 1占位，但不加overflow；再额外包裹一层<div class="scroll-area"> -
.scroll-area才加overflow-y: auto和min-height: 0——后者不可省，否则Flex计算卡住 - 避免给
.scroll-area设height: 100%，它依赖父级Flex分配后的可用空间，硬写高度反而破坏响应性
textarea、img等替换元素在Flex里特别容易触发滚动条
textarea默认是display: inline-block，底部留有基线间隙；img、iframe属于替换元素，Flex不会自动缩放它们。这两类元素在Flex嵌套中极易暴露滚动问题。
立即学习“前端免费学习笔记（深入）”；
-
textarea必须显式设display: block+width: 100%+height: 100%，仅靠flex: 1不够 - 所有
img、video、iframe必须加max-width: 100%和height: auto，否则flex-shrink基本无效 - 长文本块（如日志ID、token）需配
overflow-wrap: break-word，优先于word-break: break-all，兼容性更好 - 不要用
vertical-align或font-size: 0去hack基线间隙，它们破坏继承且不可预测
调试时最容易忽略的三个点
很多“滚动失效”其实根本不是Flex的问题，而是其他样式悄悄干扰了尺寸链路。
- 临时给
body加outline: 1px solid red，看哪一层真正超宽/超高——常发现是margin或padding没重置 - 禁用
display: flex后滚动条消失？说明问题确实在Flex层级；若还在，就得查position: absolute、transform或z-index干扰 - 移动端（尤其uni-app小程序）要注意
overflow: hidden加在外层容器上，防止原生滚动与scroll-view打架导致卡死
真正的难点不在写多少行CSS，而在于每一层Flex容器是否都明确回答了三个问题：我有没有高度/宽度约束？我的子项能不能合法收缩？滚动行为该由谁来承担？漏掉任意一环，滚动条就会出现在你完全没预料到的地方。
