根本原因是父容器无明确高度导致子元素height:100%失效；需逐层检查并设min-height:0，统一使用flex:1 1 0，对overflow子项加min-width/min-height:0，避免混用height与flex属性。
Flex嵌套时子元素不占满父容器高度
根本原因不是Flex没生效，而是父容器没高度可继承——flex布局中，子项的height: 100%只对有明确高度的父容器起作用。常见于多层嵌套时，中间某一层（比如.wrapper）没设height或min-height，导致后续所有100%全部失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 逐层检查：用浏览器开发者工具高亮每个父容器，看是否“视觉上撑开但computed height为auto”
- 关键断点加
min-height: 0：当父容器是display: flex且含flex-direction: column时，子项若设flex: 1却仍不伸展，大概率是父容器缺少min-height: 0（尤其内部含overflow: hidden或resize等触发BFC的属性） - 避免混用
height: 100%和flex: 1：同一元素上同时写两者，flex: 1会覆盖height计算逻辑，但调试时容易误判
Chrome与Safari中flex-grow行为不一致
典型现象：Safari里flex: 1的项收缩严重，甚至内容被截断；Chrome正常。这不是bug，而是Safari（尤其是iOS 15+前）对flex-basis初始值的解析更严格——当没显式设flex-basis，它可能按content而非0处理，导致flex-grow分配空间时基准不同。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一写死
flex-basis：flex: 1 1 0比flex: 1更可控 - 避免在
flex-direction: column容器中对子项设height再配flex: 1：Safari可能忽略flex-grow，直接按height裁剪 - 测试真机优先：模拟器常掩盖该问题，iOS Safari的flex渲染路径和桌面版不同
多层嵌套下overflow隐藏失效
表现是：内部滚动区域无法滚动，或滚动条消失，但内容明显溢出。本质是Flex容器默认不创建新的块格式化上下文（BFC），而overflow: hidden在Flex子项上需配合min-width: 0/min-height: 0才能正确截断。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只要父容器是
display: flex，且子项含overflow: hidden或auto，就给该子项加min-width: 0（横向布局）或min-height: 0（纵向布局） - 不要依赖
width: 100%来“撑开”Flex子项：它在嵌套Flex中常被忽略，改用flex: 0 1 auto更稳 - 慎用
flex-wrap: wrap+overflow组合：Wrap会破坏单行伸缩逻辑，此时overflow可能作用于整行而非单个子项
React/Vue组件中flex嵌套导致样式泄漏
不是CSS污染，而是框架的样式作用域机制（如Vue的scoped、React的CSS Modules）与Flex的父子关系冲突——子组件的display: flex声明若被提升到父作用域，可能意外影响外层布局流。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在组件根元素上显式重置Flex相关属性：
display: block或display: contents（注意contents兼容性） - 避免在父组件里用
:deep()或/deep/穿透修改子组件Flex结构：容易引发连锁重排，改用props控制子组件内部flex配置更安全 - 使用
data-*属性标记嵌套层级，例如data-flex-level="2"，再用CSS attribute selector做局部隔离
事情说清了就结束。最常漏掉的是min-height: 0和flex-basis这两处，它们不出错时不显眼，一出就是整块UI塌陷或滚动失灵，而且很难通过console定位。
