Урок 159 із 239
67%
← Назад

Висота батьківського елемента flex у CSS

Вивчаємо, як формується висота flex-контейнера, якщо йому не задано власну висоту.

Висота батьківського елемента flex у CSS

Якщо flex-контейнеру не задати висоту, його висота буде автоматично визначатися вмістом.

Висота батьківського елемента буде дорівнювати висоті його дочірніх flex-елементів.

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>
.parent {
  display: flex;
  width: 300px;
  border: 1px solid red;
}

.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
❗ Важливо:

Flex-контейнер не має власної висоти, тому він підлаштовується під своїх дочірніх елементів.

  • display: flex створює flex-контейнер.
  • Висота без height залежить від вмісту.
  • Дочірні елементи визначають розмір батьківського блока.
  • Властивість width працює незалежно від висоти контейнера.
.child {
  width: 50px;
  height: 100px;
  border: 1px solid green;
}
📌 Завдання:
  1. №1. Створіть flex-контейнер із трьома дочірніми блоками.
  2. №2. Не задавайте батьківському елементу height.
  3. №3. Змініть висоту дочірніх елементів і спостерігайте за зміною висоти батька.
💡 Показати підказку

Спробуйте змінити height дочірнього елемента з 50px на 100px і перевірте, як зміниться flex-контейнер.

✅ Показати відповідь
.parent {
  display: flex;
}

.child {
  height: 50px;
}