overflow: управление переполнением

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

Зачем нужно

Без overflow содержимое просто вылезает за границы блока, ломая раскладку. Контроль переполнения нужен для скроллируемых списков, обрезки текста, создания блочного контекста и исправления проблем с float.

Где используется

  • Скроллируемые боковые панели и таблицы (overflow: auto)
  • Обрезка изображений и карточек (overflow: hidden)
  • Контейнер для float-элементов (clearfix через overflow: hidden)
  • Исправление проблем с min-width во Flexbox
  • Горизонтальный скролл для таблиц на мобильных

Значения

.box {
  overflow: visible; /* по умолчанию: контент вылезает за блок */
  overflow: hidden;  /* скрыть всё, что выходит за границы */
  overflow: scroll;  /* всегда показывать полосы прокрутки */
  overflow: auto;    /* полосы только если нужны */
  overflow: clip;    /* обрезать без создания блочного контекста (новее) */
}

/* Раздельно по осям */
.box {
  overflow-x: auto;   /* горизонтальная прокрутка */
  overflow-y: hidden; /* вертикаль скрыть */
}

Примеры

Скроллируемый список

.sidebar {
  height: 400px;
  overflow-y: auto; /* вертикальная прокрутка при необходимости */
}

<div class="sidebar">
  <ul>
    <li>Пункт 1</li>
    <!-- много пунктов -->
  </ul>
</div>

Обрезка изображения в карточке

.card__image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Горизонтальный скролл таблицы

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

<div class="table-wrapper">
  <table><!-- широкая таблица --></table>
</div>

Блочный контекст форматирования (BFC)

overflow: hidden и overflow: auto создают новый Block Formatting Context:

  • Элемент содержит в себе float-потомков
  • Не допускает схлопывания внешних отступов
.container {
  overflow: hidden; /* классический clearfix */
}

Частые ошибки

  1. overflow: scroll всегда — полосы прокрутки появляются даже когда не нужны; лучше auto.
  2. overflow: hidden блокирует position: sticky — если overflow задан на родителе, sticky внутри перестаёт работать.
  3. Забыть обёртку для таблицы — таблица не прокручивается сама по себе; нужен контейнер с overflow-x: auto.

Связанные темы

Ресурсы