Почему родитель не подстраивается под ребёнка (CSS)?

Question

[Space Around]

Есть родитель у которого не заданы размеры, но есть position: relative, и есть ребёнок у которого position: absolute и заданы размеры, почему родитель не подстраивается под ребёнка?

<div class="parent">
  <div class="child">    
  </div>
</div>

.parent {
  position: relative;
  background-color: black;
  padding: 1em;
}

.child {
  position: absolute;
  background-color: blue;
  width: 50px;
  height: 50px;
}

Answer 1

[Пашенька]

Потому что элемент спозиционированный как absolute выпадает из потока документа. Теперь родитель будет вести себя так, словно у него нет детей. Можно сказать, родитель отказался от своего ребёнка.

Comments

[Шохрух Шаймардонов]

Я б сказал, что ребенок от родителей ушел). И да, у ребенка с позишн абсолют, новым родителем станет либо окно, либо его прародитель с таким же абсолютным позишн

[Space Around]

Есть какой-то выход, именно так что бы у ребёнка был position: absolute, а родитель подстраивался под этого ребёнка (без js)?

[Пашенька]

Максим Виксна, В таком родителе должно быть что-то не с позишн absolute, что будет задавать ему высоту контента, то есть контент какой-то нужен, будь-то картинка или текст. Иначе скриптом задавать ему размеры.

Шохрух Шаймардонов, не-а, у него родитель с position:relative, он относительно него позиционируется, так что он не ушёл от родителей, просто родители его не замечают.

[lamer350]

Максим Виксна, скорее всего нужно пересмотреть подход и постараться отказать от position:absolute, можете попробовать выгрузить блок в песочницу и обьяснить что нужно на выходе.