Flex子项height: 100%失效的根本原因是父级高度为auto，需逐层确保祖先有明确高度（如html,body{height:100%}）且无min-height:0等干扰；Flex布局中优先使用flex:1而非height。
Flex容器本身没有显式高度，子元素height: 100%必然失效
浏览器计算height: 100%时，只认父级的“已知高度值”（如px、vh、rem），不认auto或由内容撑开的高度。Flex容器默认就是height: auto，所以哪怕你给子项写了height: 100%，它实际算出来是100% × 0px = 0px。
常见错误现象：.main-content设了height: 80%，但高度为零；检查半天子元素样式，却漏掉了<main></main>或它的上层<div class="layout">根本没设高。
<ul>
<li>必须逐层向上确认：从目标子元素开始，查它的父、祖父……直到<code>html或某个明确设高的祖先
html, body { height: 100%; }只是起点，不是终点——中间任何一层是height: auto（默认值），链就断了Computed面板里的height是不是一个具体数值（比如500px或100vh），而不是auto
在Flex容器里混用height和flex属性容易互相覆盖
Flex子项的尺寸优先由flex相关属性（flex-grow、flex-basis）决定，height只是初始参考，常被忽略。尤其当父容器是display: flex且方向为column时，写height: 50%基本无效。
- 想让子项占满剩余空间，直接删掉
height，改用flex: 1（等价于flex: 1 1 0） - 若需保留百分比语义（比如响应式切换
flex: 1→height: 30%），可组合写：min-height: 30%; flex: 1;，避免flex完全压制高度意图 - 别同时设
align-self: stretch和height: 100%——前者是Flex默认行为，后者冗余且可能触发Safari旧版本bug
绝对定位子元素的height: 50%为什么总按视口算？
对position: absolute元素设height: 50%，其包含块（containing block）不是视觉上的“最近父容器”，而是最近的position: relative/absolute/fixed祖先。如果找不到，就回退到视口（viewport）。
立即学习“前端免费学习笔记（深入）”；
- 典型坑：弹窗内部
.content写了height: 80%，结果在小屏上溢出，因为它的定位父级没设height，于是按80% × viewport height算 - 解法一：确保最近定位祖先（比如
.modal-body）有明确高度，例如height: 400px或max-height: 80vh - 解法二：不用百分比，改用
top/bottom区间控制，例如top: 60px; bottom: 20px;，更稳定
Safari 14–15.6对height: 100%有特殊处理逻辑
这些版本中，即使父Flex容器有height: 100vh，子项height: 100%仍可能不拉伸，本质是它没把Flex容器识别为“有明确高度的上下文”。
- 最稳妥做法：去掉子项的
height: 100%，依赖align-items: stretch（Flex默认值）让它自然拉伸 - 检查是否误加了
min-height: 0——某些UI框架重置样式会带这个，Safari下会阻止拉伸 - 如果子项含
<img>，确保它有height: auto或显式尺寸，否则Safari可能卡住最小高度估算
min-height: 0这类看似无害的重置样式，在Flex场景下会悄悄破坏拉伸行为。
