flex元素百分比高度失效的根本原因是父容器高度为auto导致无计算基准；需设置父容器明确高度（如height: 400px或min-height: 100vh），并确保子项未被height、max-height等属性阻止拉伸，优先使用flex属性替代百分比分配空间。
Flex元素设置百分比高度无效，根本原因是百分比高度依赖父容器有明确的高度值，而Flex容器默认不传递高度给子项——即使开启了display: flex，子元素的height: 50%依然可能失效。
确保父容器有明确的高度值
百分比高度（如height: 80%）是相对于**包含块（containing block）**计算的。对Flex子项来说，这个包含块通常是其Flex父容器；如果父容器高度为auto（默认行为），那子项的百分比就无从计算。
- 给父容器设置具体高度：
height: 400px或height: 100vh - 若需填满视口，用
min-height: 100vh更稳妥（避免内容少时撑不满） - 避免仅靠
flex: 1或align-items: stretch来“期望”高度生效——它们控制的是主轴/交叉轴的拉伸逻辑，不等同于定义高度本身
确认父容器已启用flex且未限制子项高度
开启display: flex只是第一步，还需检查是否意外覆盖了子项的拉伸行为：
- 子元素默认会拉伸（
align-items: stretch），但前提是它没有设置height、max-height或flex-shrink: 0等阻止拉伸的属性 - 若子元素写了
height: 200px，那height: 50%就会被忽略（固定值优先级更高） - 检查是否误加了
overflow: hidden或position: absolute——这些会脱离flex布局上下文，导致百分比失效
替代方案：用flex属性代替百分比高度
在Flex布局中，通常不需要用百分比高度来分配空间——flex属性更可靠、语义更清晰：
立即学习“前端免费学习笔记（深入）”；
- 让两个子项按比例占高：
flex: 2和flex: 3（总和为5，分别占2/5、3/5） - 固定头部+自适应主体：头部设
flex: 0 0 auto，主体设flex: 1，自动填满剩余空间 - 配合
min-height使用更健壮，例如主体加min-height: 0防止内容溢出时破坏布局
基本上就这些——不是Flex不支持百分比高度，而是它对“高度来源”的要求更严格。先稳住父容器高度，再理清子项的拉伸条件，问题基本就解了。