Как заставить элемент определять свою высоту по содержимому?

Question

[Alexandroppolus]

ситуация: https://codepen.io/alexandroppolus/pen/KwgwWrj

<div class="list">
  <div class="item">
    <div class="parent">
      <div class="child">preved</div>
      <div class="child">preved medved kagdila</div>
    </div>
  </div>
  ...
</div>

.list {
  display: flex;
  flex-direction: column;
}

.item {
  /* ??? */
}

.parent {
  display: flex;
  align-items: safe center;
  height: 50px;
}

Для parent указана высота, но высота некоторых child может быть больше и они вылезают снизу (см. кодопен). Хочется, чтобы item определял свою высоту с учетом этих вылезающих чилдов. Что и где добавить/прописать?

Фиксированную высоту убрать не могу, надо чтобы элементы выравнивались по центру этой 50-пиксельной линии, а высокие элементы прижимались к верху, в общем, по правилам "align-items: safe center"

Comments

[historydev]

Ты уж определись, они должны быть в центре или сверху, высота должна адаптироваться или быть фикс, столько противоречий что можно заблудиться.

Что такое обычный элемент, а что считать высоким?
- Раздели блоки на разные размеры и примени отступы сверху до необходимого результата, блок каждого размера будет занимать ровно столько, сколько отведёшь и располагаться ровно там где укажешь.
- Статус тоже должен быть child.

[Alexandroppolus]

historydev, все чилды, в том числе статус, должны вертикально выравниваться по центру 50-пиксельной линии (align-items: center). Но если в чилде оказалось много текста и его высота больше 50, то он уже выравнивается не по центру, а по верхнему краю (это делает safe).

Если я убираю height: 50px; или заменяю его на min-height, то parent растягивается по высоте самого высокого чилда, но элементы в нем уже не центрируются, как нужно.

[Михаил Ливач]

Alexandroppolus, (глядя на картинку): вот во втором ряду сверху расстояние между границей .child и .parent примерно 5 пикселов, а в первом ряду получилось примерно 15 пикселов - вы хотите, чтобы было одинаково, 5 пикселов?

Answer 1

[Антон Антон]

типа такого? https://play.tailwindcss.com/oApkJuQyrP

Answer 2

[Михаил Лялин]

А это случайно не частный случай Равномерное размещение блоков разных размеров?