怎样解决CSS Flex嵌套布局高度无法撑满？

嵌套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也无空间可分。

必须给最外层容器加明确高度基准：

1. min-height: 100vh比height: 100%更可靠，不依赖祖先链
2. 若用height: 100%，则html、body、每一层父级都得写height: 100%
3. 开发者工具里检查computed height：如果是auto或0px，问题就卡在这儿

嵌套Flex容器默认min-height: auto会阻断拉伸

Flex子项作为另一个Flex容器时，浏览器默认给它设min-height: auto——这会让它“拒绝塌缩”，导致内部flex: 1子项无法向下拉伸，哪怕外层已设flex: 1。

解决方法很简单，在嵌套的子Flex容器上加：

1. min-height: 0（垂直布局时）
2. min-width: 0（水平布局时）
3. 别只加flex: 1，漏掉这个就白写

Safari旧版本对嵌套Flex更苛刻

iOS 13.3及更早的Safari，对嵌套Flex的尺寸计算极严格：只要某一层缺显式宽高，或子项带默认min-width: auto，整条链路的Flex layout引擎就可能不启动。

实操要点：

1. 所有Flex容器都要补display: -webkit-flex，且放在display: flex前面
2. 配套属性也要加前缀：-webkit-flex-direction、-webkit-align-items等
3. 避免混用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计算逻辑：你显式接管了尺寸控制，浏览器就不再拉伸。

排查顺序：

1. 删掉子元素所有height/min-height/max-height，看是否立刻等高
2. 确认没写align-self: flex-start之类覆盖父级align-items
3. 图片、iframe等替换元素要额外加height: 100% + min-height: 0才能参与拉伸

真正容易被忽略的是：嵌套越深，min-height: auto这种默认值越容易在中间层悄悄卡住整个拉伸链路，不是写上flex: 1就能完事。