Что такое свойство overflow в CSS, как оно работает и в каких случаях его следует использовать?

Свойство overflow в CSS определяет, как обрабатывать содержимое, которое выходит за пределы блочного элемента, чьи размеры явно заданы (width, height, max-width, max-height).

Его работа основана на контроле видимости и возможности прокрутки содержимого.

Возможные значения:

• visible (по умолчанию): Содержимое отображается за пределами блока.
• hidden: Содержимое обрезается за пределами блока и скрывается.
• scroll: Всегда отображаются полосы прокрутки (горизонтальная и вертикальная), позволяя прокручивать содержимое.
• auto: Полосы прокрутки отображаются только при необходимости (когда содержимое выходит за пределы блока).
• overlay: Схож с auto, но полосы прокрутки не занимают пространство внутри блока.

Свойство overflow-x контролирует горизонтальное переполнение, а overflow-y — вертикальное.

Примеры использования:

• Создание прокручиваемых блоков с фиксированными размерами (например, списка комментариев, окна чата).
• Скрытие части содержимого, которое не должно отображаться (например, длинный заголовок).
• Реализация модальных окон или всплывающих блоков с возможностью прокрутки внутреннего содержимого.
• Создание областей с прокруткой для веб-приложений с ограниченным пространством на экране.

/* Пример использования overflow: auto */
.scrollable-box {
  width: 200px;
  height: 150px;
  border: 1px solid black;
  overflow: auto; /* Полосы прокрутки появляются при необходимости */
}

/* Пример использования overflow: hidden */
.cropped-text {
  width: 100px;
  white-space: nowrap; /* Предотвращаем перенос строки */
  overflow: hidden;    /* Обрезаем текст, выходящий за границы */
  text-overflow: ellipsis; /* Добавляем многоточие */
}

Таблица значений: