Как содержать в относительном родительском контейнере абсолютный дочерний элемент

Question

Есть ли способ увеличить контейнер относительной родительской высоты в соответствии с его абсолютным потомком?

https://codepen.io/daniele-acquaviva/pen/JzpzxG

.relative-parent {
  background: red;
  position: relative;
  text-align: center;
}

.absolute-child {
  background: yellow;
  position: absolute;
  top: 0;
}

<div class="relative-parent">
  <p> Parent div content </p>
  <div class="absolute-child">
    <p> child </p>
    <p> child </p>
    <p> child </p>
    <p> child </p>
    <p> child </p>
    <p> child </p>
  </div>
</div>

Answer 1

Если вы используете position: absolute; для детей, они не учитываются в родительском контенте.

Согласно документации w3schools: https://www.w3schools.com/cssref/pr_class_position.asp

Элементпозиционируется относительно своего первого позиционированного (не статического) элемента-предка

---

РЕДАКТИРОВАТЬ: Этого можно добиться с помощью JavaScript, см. здесь https://codepen.io/tmacpolo/pen/ywvWbb

EDIT2: Добавлен MutationObserver для настройки высоты родителя при изменении высоты ребенка https://codepen.io/tmacpolo/pen/ywvWbb

Answer 2

На самом деле это невозможно из-за того, что абсолют работает, поскольку он находится вне потока от макета.Единственный способ избежать разрушения - дать высоту силы его родительскому элементу.