Почему 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, который относительно окна просмотра.