Растягиваем div на оставшуюся ширину: две колонки CSS

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

Если нужно, чтобы div занял оставшееся свободное пространство внутри контейнера, примените свойство flex-grow: 1;.

.container {
  display: flex;
}

.fill-remaining {
  flex-grow: 1;
}

<div class="container">
  <div>Левая колонка</div>
  <div class="fill-remaining">Растягиваемая колонка... </div>
</div>

Создание раскладки с двумя колонками, где правая занимает всё открытое пространство, не так уж сложно!

Подробное объяснение

Настройка контейнера

Во-первых, ваш .container должен быть определён как flex-контейнер:

.container {
  display: flex; /* Этим мы устанавливаем правила внутренних отношений! */ 
  height: 100%; /* Задача – использовать полностью доступный объём! */ 
}

Чтобы div заполнил вертикальное пространство контейнера по всей высоте, установите height: 100%;. Обратите внимание, что высота в 100% должна быть задана и для html, и для body.

Подробнее об этом расскажет наш спикер на видео

Левая колонка с динамическим содержимым

Левая колонка предназначена для динамического контента и должна иметь масштабируемую ширину. Здесь не требуются flex-свойства, достаточно width: auto; или, при необходимости, установите минимальную и максимальную ширину:

.variable-width {
  width: auto; /* либо min-width/max-width */
}

Растягивание правой колонки

Для того чтобы правая колонка расширилась и заняла все свободное пространство, используйте flex-grow: 1;:

.fill-remaining {
  flex-grow: 1; /* Растём вместе с увеличением возможностей! */
  overflow: hidden; /* Я, как ниндзя, незаметен и эффективен! */
}

Свойство overflow: hidden; помогает избежать различных трудностей, связанных с внутренней геометрией элементов.

Избавляемся от перекрытия

С flex-контейнером вам не придётся беспокоиться о том, что элементы могут перекрываться — как это случается с float-элементами. Флексбокс идеально подходит для создания адаптивных и гибких раскладок.

Визуализация разметки

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

.variable-width {
  background-color: lightblue; /* Посмотрите, где всё расположено! */
}

.fill-remaining {
  background-color: lightgreen; /* Пока ярко, но это временно! */
}

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

Волшебство Calc

Когда размер колонки должен определяться содержимым или другими факторами, ёмко пригодится calc() для точных математических расчётов:

.fill-remaining {
  width: calc(100% – 200px); /* Математика всегда к месту! */
}

Так можно убедиться, что размер правой колонки адаптируется к изменениям размеров сопутствующего элемента.

Учет старых браузеров

Если необходима поддержка старых браузеров типа IE6/7, то следует учесть их специфические особенности, вроде hasLayout. Однако с приходом flexbox в современной веб-разработке это становится всё менее актуально.

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

Для наглядности можно представить эту задачу в виде поезда (🚆), прибывшего на станцию (🚉), и должен занять все свободное пространство:

Длина платформы: |==============================|
Длина поезда:    |========🚆                    |

Ваша задача — обеспечить создание условий, благодаря которым поезд способен растянуться на всю длину пути:

|==============================|
|========🚆====================|

Точно также ваш div будет растягиваться, чтобы занять все свободное пространство на платформе при помощи flex-grow: 1.

Изучение работы с Flexbox

Flexbox — инструмент выравнивания и распределения

Flexbox предоставляет инструменты для выравнивания и распределения пространства между элементами внутри контейнера:

.container {
  align-items: stretch; /* Время растянуться! */
  justify-content: flex-start; /* Все на старт! */
}

Адаптивность во внимание

Медиа-запросы позволяют адаптировать раскладку к разным размерам экранов:

@media (max-width: 600px) {
  .container {
    flex-wrap: wrap; /* Управление занимаемым пространством. */
  }

  .fill-remaining {
    width: 100%; /* Размер имеет значение! */
  }
}

Отказ от хаотичной CSS

Для поддержания порядка и чистоты в CSS-коде:

• Группируйте селекторы похожего типа.
• Располагайте часто используемые свойства в начале файла стилей.
• Используйте сокращённые свойства.
• Комментируйте код для облегчения его понимания.

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

1. Полное руководство по Flexbox от CSS-Tricks — Мастерство работы с Flexbox на ваших кончиках пальцев.
2. Полное руководство по CSS Grid от CSS-Tricks — Изучите CSS Grid для полного контроля над раскладкой.
3. Модель коробки в веб-разработке от MDN — Основы CSS box модели.
4. Основные концепции flexbox от MDN — Основы flexbox для начинающих.
5. Разнообразные примеры использования Calc() от CSS-Tricks — calc() – чёрная магия CSS!
6. Can I use... для поддержки Flexbox — Провека совместимости flexbox с рядом браузеров.
7. Can I use... для поддержки CSS Grid — Узнайте о поддержке CSS Grid браузерами.