Как расширить высоту родительского div с помощью CSS

Быстрый ответ

Для того чтобы высота родительского элемента <div> автоматически подготовлялась под размер вложенных элементов, можно вооружиться CSS Flexbox. Назначьте для родительского элемента параметры display: flex; и flex-direction: column;. В результате родительский <div> будет изменять свои размеры в соответствии с высотой встроенных элементов:

<div style="display: flex; flex-direction: column;">
  <div style="height: 50px; background: lightblue;"></div>
  <div style="height: 100px; background: lightcoral;"></div>
</div>

Управление переполнением

Чтобы управлять отображением полос прокрутки и исключить лишние проблемы с ними, примените для родительского элемента <div> стиль overflow: auto;:

.parent {
  overflow: auto;
}

Представление в виде таблицы

Если вам удобнее использовать табличное представление, примените display: table; для родительского и display: table-row; для дочерних <div>:

.parent {
  display: table;
}

.child {
  display: table-row;
}

Облегчение контента

Для идеального «облегчения» контента родительским <div> рекомендуется использовать параметр height: max-content;:

div.parent {
  height: max-content;
}

Размещение плавающих элементов

Если вложенные элементы используют параметр float, стоит добавить в родительском элементе псевдоэлемент с clear: both;:

.parent::after {
  content: "";
  display: table;
  clear: both;
}

При этом, если вам не нужен ползунок прокрутки, то уберите параметр overflow: auto;.

Решение с использованием inline-block

Альтернативой может стать использование display: inline-block; для родительского <div>, это решение все еще актуально для старых версий браузеров:

div.parent {
  display: inline-block;
}

Визуализация

Наглядное описание концепции с использованием эмоджи:

| Ребенок ⭐ | Ребенок 🌟 | Ребенок 🌠 |

Регулирование высоты родительского <div> можно представить как телескоп, который расширяет свою длину, чтобы охватить все «звезды»—дочерние элементы:

🔭

|

|

| (Расширение, охватывающее всех детей)

|

⭐ 🌟 🌠

Управление минимальной высотой

Если необходима гибкость, используйте min-height, чтобы <div> мог расширяться, в зависимости от содержимого:

div.parent {
  min-height: 100px;
}

Управление прокруткой на уровне всей страницы

Если прокрутка необходима на уровне всей страницы, настройте её через элементы html и body:

html, body {
  height: 100%;
  overflow: auto;
}

Внесение модификаций

Теперь можно перейти на jsfiddle для наглядного примера применения одного из вышеуказанных методов.

Продвинутые техники применения

Чтобы подготовить браузер к предстоящим изменениям и улучшить его производительность, используйте параметр will-change на свойства, которые ожидается модифицировать:

div.parent {
  will-change: height;
}

Особенности работы с переносами в Flexbox

Если необходимо обрабатывать переносы дочерних элементов на новую строку, примените flex-wrap внутри CSS Flexbox:

div.parent {
  display: flex;
  flex-wrap: wrap;
}

Это позволят вложенным элементам переходить на новую строку при исчерпании места.

Полезные материалы

1. Руководство по Flexbox от CSS-Tricks
2. Основы Flexbox в документации MDN Web Docs
3. Обзор методов очистки Floats от SitePoint
4. Урок по использованию метода Clearfix от w3schools
5. Список ресурсов по Flexbox от Smashing Magazine
6. Руководство по применению составного свойства will-change от CSS-Tricks
7. Разбор переноса элементов в Flexbox от MDN Web Docs