Что такое переполнение контентом в CSS

Переполнение контента (overflow) возникает, когда содержимое элемента превышает его заданные размеры. CSS предоставляет свойство overflow для управления этим поведением.

Основные значения:

• visible (по умолчанию) — контент выходит за границы элемента.
• hidden — обрезает контент, выходящий за границы.
• scroll — добавляет полосы прокрутки (даже если контент помещается).
• auto — полосы прокрутки появляются только при необходимости.

Пример:

.box {
  width: 200px;
  height: 100px;
  overflow: auto; /* или hidden/scroll */
}

Нюансы:

• overflow: hidden создает новый контекст форматирования, что может влиять на позиционирование.
• Для горизонтального/вертикального переполнения отдельно используйте overflow-x и overflow-y.
• Учитывайте доступность — скрытие контента может сделать его недоступным для пользователей.