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

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

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

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

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

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

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

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

css

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