height: 100%在Flex子元素中失效是因父容器高度为auto时无计算值可继承，且会禁用align-items: stretch；应优先用flex: 1，嵌套Flex需设min-height: 0，IE11中避免依赖stretch。
为什么height: 100%在Flex子元素里反而锁死高度
这不是浏览器bug，是CSS计算逻辑冲突：height: 100%要求子元素去继承父容器的**计算后高度**，但Flex父容器若本身高度为auto（即由内容决定），那它就没有“可继承的高度值”——结果就是height: 100%算出0px。更糟的是，一旦写了这个声明，浏览器就认为你已接管高度控制，直接忽略align-items: stretch的拉伸行为。
实操建议：
- 删掉所有子元素上的
height: 100%、min-height: 100%、max-height: 100% - 如果真需要“填满”，优先用
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 仅当父容器有明确高度（如
height: 400px或min-height: 100vh）时，height: 100%才可能安全生效
align-self覆盖align-items导致拉伸失效
align-self是子元素级对齐控制，它会完全覆盖父容器的align-items设置。哪怕父容器写了align-items: stretch，只要某个子元素加了align-self: flex-start或align-self: center，那个子元素就立刻退出拉伸队列——高度退回内容自身高度，常见于调试时随手加的对齐微调。
实操建议：
- 检查子元素是否显式设置了
align-self，特别是flex-start、center、flex-end - 想恢复拉伸？删掉
align-self，或显式写成align-self: stretch - 旧版Safari对
align-self: auto支持不稳定，不推荐依赖；直接写stretch更可靠
嵌套Flex中min-height: 0必须手动加
子Flex容器本身是父Flex的子项，而现代浏览器（Chrome 80+、Firefox 68+、Safari 14.1+）会给Flex子项默认加min-height: auto——这听起来合理，但实际会阻止它向下传递拉伸能力。比如子Flex内部有个flex: 1的区域，若没重置min-height，它根本不会“塌下来”让父Flex感知真实高度。
实操建议：
- 所有作为Flex子项的嵌套Flex容器，都加上
min-height: 0 - 不止一层嵌套？每一层都要加，例如：
.outer { display: flex; } .inner { display: flex; min-height: 0; } .deep { display: flex; min-height: 0; } - 别指望
min-height: auto能兜底——它在这里是限制项，不是保障项
IE11下align-items: stretch基本不可信
IE11的Flex实现对stretch有严重缺陷：即使父容器有明确高度、子元素没设任何高度，它仍可能渲染为0px高。这不是配置问题，是引擎级bug。
实操建议：
- 彻底放弃在IE11中依赖
align-items: stretch撑高 - 改用
flex: 1作为主方案，它在IE11中兼容性远好于stretch - 若必须用
stretch，需配合min-height: 0（IE11默认min-height: auto会阻断拉伸） - 绝对不要同时写
height: 100%和flex: 1——IE11会取前者，导致拉伸失效
真正难处理的从来不是单一属性，而是height: 100%、align-self、嵌套Flex的min-height三者叠加时的隐式冲突。调试时别只盯着一个地方改，得把这三类设置全扫一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
