css - 为什么 inline-block 不会扩展到父母计算的高度？

Question

在下面的代码中，孩子的(inline-block)宽度扩展到其父计算宽度的 100%，但我不知道为什么height不.child扩展到.parent's计算高度。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.ancestor {
  height: 250px;
  border: 1px solid green;
}

.parent {
  display: block;
  padding: 20px;
  border: 1px solid #474747;
  background-color: #fff;
}

.child {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: pink;
}

<div class="ancestor">
  <div class="parent">
    <p class="child">
      Lorem ipsum dolor sit amet, consectetur adipisicing.
    </p>
  </div>
</div>

我对了解这种行为背后的逻辑而不是解决方案更感兴趣。有人可以解释一下这种情况。

谢谢

Answer 1

height: 100%;仅当父元素具有定义的高度设置时才有效。如果该高度设置也是一个百分比值，那么祖父母也需要一个定义的高度，这同样适用于直到body和的所有祖先html，除非其中一个具有绝对值（px、em 或类似）或 的高度设置vh，这是相对于视口的。