为何父元素未设置height时子元素height:100%仍生效？

通常我们认为父元素未显式设置height时，子元素的height:100%会因缺乏参考基准失效，但你遇到的反例是flex布局特性+内容固有高度共同作用的结果，具体拆解如下：

场景回顾 #

你的代码结构中，最外层是一个垂直方向的flex容器，内部包含未设置height的父元素，以及两个设置了height:100%的子元素：

<div style="
      display: flex;
      flex-direction: column;
      height: 200px;
      width: 200px;
      background-color: yellow;
    ">
  <div class="parent" style="background-color: black">
    <div class="child" style="height: 100%; width: 100%; background-color: blue">
      <span style="line-height:24px">123</span>
    </div>
    <div class="child" style="height: 100%; width: 100%; background-color: red">
      <span style="line-height:24px">123</span>
    </div>
  </div>
</div>

核心原因分析 #

• 外层flex容器提供间接高度上下文
  最外层黄色容器是display:flex; flex-direction:column; height:200px，属于有明确高度的flex容器。内部的.parent作为flex子元素，虽未设置height，但它的高度会由内部内容撑开，且这个撑开的高度会被浏览器视为子元素百分比高度的有效参考值。

• 子元素内容先确定父元素的固有高度
  移除.child的height:100%时，每个.child的高度由span的line-height:24px撑开为24px，此时.parent的固有内容高度为两个子元素高度之和（48px），这个值成为后续.child设置height:100%的参考基准。

• 百分比高度基于固有内容高度计算
  给.child加上height:100%后，浏览器先计算出.parent的固有内容高度（48px），再将这个值作为子元素高度的参考。因此每个.child的高度被设为48px，最终.parent的高度更新为两个子元素的高度总和（96px）。

• 移除span后失效的逻辑
  移除span后，.child没有内容支撑高度，.parent的固有内容高度变为0。此时.child的height:100%找不到有效参考高度，自然无法生效，高度被计算为0。

内容的提问来源于stack exchange，提问作者MazeL98