为何未设置父元素宽度时，left: -50%仍能准确定位子元素？

我已经明白，在下面的示例里，因为父元素没设置明确高度，最内层div的top: -50%不起作用。但我好奇的是，为什么父元素没设置明确宽度时，left: -50%却能正常生效？

示例代码 #

CSS

/* Positioning */
.a {
  position: relative;
}

.b {
  position: absolute;
  top: 0;
  left: 0;
}

.c {
  position: relative;
  top: -50%;
  left: -50%;
}

/* Visuals */
.a {
  background-color: lightpink;
  padding: 1rem;
  height: 10rem;
  margin: 4rem;
}

.b {
  background-color: lightgreen;
}

.c {
  background-color: lightblue;
  padding: 1rem;
}

HTML

<div class="a">
  <div class="b">
    <div class="c">
      <p>Some Text</p>
    </div>
  </div>
</div>

原因说明 #

核心在于CSS中水平与垂直方向的布局规则差异，以及相对定位元素百分比值的计算逻辑：

• 相对定位元素的top/left百分比，是基于它的包含块（此处为.b）的尺寸计算的。
• 关于宽度（left相关）：
  .b是绝对定位元素，未设置明确宽度时，它的宽度会被子元素.c的内容+padding撑开，这个宽度值是明确的。因此.c的left: -50%能基于.b的实际宽度算出具体偏移量，正常生效。
• 关于高度（top相关）：
  .b未设置明确高度，它的高度完全依赖子元素.c的高度。但.c的top: -50%又需要.b的高度来计算偏移量——这就形成了循环依赖，浏览器无法算出明确的高度值，最终top: -50%不生效，等同于未设置该属性。

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