Как задать дочернему элементу высоту родителя, у которого высота зависит от контента?

Question

[nikmil]

Не рисуется дочерений элемент по высоте родителя, он может отрисоваться если родителю указать фикс. высоту, но это не мой вариант.
Подскажите пожалуйста в чем проблема. Спасибо!

<div class='parent'>
  <div class='child'></div>
  <div class='child2'></div>
</div>

.parent {
  padding: 10px;
  
  width: 150px;
  
  display: flex;
  justify-content: space-between;
  
  background: red;
}

.child {
  width: 2px;
  height: 100%;
  
  background: #fff;
}

.child2 {
  width: 50px;
  height: 200px;
  
  background: black;
}

Comments

[Ankhena]

child с белым фоном не должен содержать внутри себя ничего и это должен быть div блок

Может, тогда всё вообще не так? Пустые блоки с большой долей вероятности это чьи-то костыли.
Может, это всё таки border, градиент или псевдо, а вовсе не то, вы пишете?

https://codepen.io/AnnaSummer/pen/OJrqdPp

Answer 1

[Михаил Р.]

Попытка понять мыли автора №1:


Попытка понять мыли автора №2:

Comments

[nikmil]

Спасибо за ответ, но к сожалению это не решает мою проблему. так как child с белым фоном не должен содержать внутри себя ничего и это должен быть div блок

[Михаил Р.]

nikmil,

child с белым фоном не должен содержать внутри себя ничего

Где это сказано в вопросе?

и это должен быть div блок

.child не div блок у меня?

Как задать дочернему элементу высоту родителя, у которого высота зависит от контента?

В моем примере высота дочернего элемента равна высоте родителя, у которого высота в свою очередь равна его контенту. Принимайте работу!

[Михаил Р.]

nikmil, добавил вариант без изображения в .child