嵌套flex失效主因是父容器无显式高度且中间层min-height: auto阻断拉伸；需设外层min-height: 100vh，并为嵌套flex容器显式设min-height: 0或min-width: 0，旧版safari还需加-webkit前缀及避免混用width与flex。
父容器没显式高度，嵌套Flex直接失效
嵌套Flex里子元素撑不满，90%是因为外层父容器没设可计算的高度。Flex不生成高度，只分配空间；如果外层容器是height: auto（比如普通div），那它本身高就是0，内层再怎么flex: 1也无空间可分。
必须给最外层容器加明确高度基准：
-
min-height: 100vh比height: 100%更可靠，不依赖祖先链 - 若用
height: 100%，则html、body、每一层父级都得写height: 100% - 开发者工具里检查
computed height：如果是auto或0px，问题就卡在这儿
嵌套Flex容器默认min-height: auto会阻断拉伸
Flex子项作为另一个Flex容器时，浏览器默认给它设min-height: auto——这会让它“拒绝塌缩”，导致内部flex: 1子项无法向下拉伸，哪怕外层已设flex: 1。
解决方法很简单，在嵌套的子Flex容器上加：
-
min-height: 0（垂直布局时） -
min-width: 0（水平布局时） - 别只加
flex: 1，漏掉这个就白写
Safari旧版本对嵌套Flex更苛刻
iOS 13.3及更早的Safari，对嵌套Flex的尺寸计算极严格：只要某一层缺显式宽高，或子项带默认min-width: auto，整条链路的Flex layout引擎就可能不启动。
实操要点：
- 所有Flex容器都要补
display: -webkit-flex，且放在display: flex前面 - 配套属性也要加前缀：
-webkit-flex-direction、-webkit-align-items等 - 避免混用
width: 100%和flex: 1，Safari优先按width算，flex被降级无效
flex: 1不生效，先看是不是写了height或min-height
子元素只要写了height、min-height或max-height（哪怕只是min-height: 0），align-items: stretch就自动失效——这不是bug，是CSS计算逻辑：你显式接管了尺寸控制，浏览器就不再拉伸。
排查顺序：
- 删掉子元素所有
height/min-height/max-height，看是否立刻等高 - 确认没写
align-self: flex-start之类覆盖父级align-items - 图片、iframe等替换元素要额外加
height: 100%+min-height: 0才能参与拉伸
真正容易被忽略的是：嵌套越深，min-height: auto这种默认值越容易在中间层悄悄卡住整个拉伸链路，不是写上flex: 1就能完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
