CSS · содержимое

Свойство overflow

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

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

visible показывает переполнение, hidden обрезает его, auto добавляет прокрутку при необходимости, а scroll резервирует её постоянно.

.panel {
  max-height: 280px;
  overflow: auto;
}

Отдельные направления

Горизонтальное и вертикальное поведение настраиваются через overflow-x и overflow-y. Таблице на телефоне часто разрешают горизонтальную прокрутку, не обрезая данные.

.table-wrap { overflow-x: auto; }
.table-wrap table { min-width: 720px; }

Обрезка декоративных элементов

hidden полезен для изображения внутри скруглённой карточки, но может случайно обрезать тень, фокус или выпадающее меню. Перед применением проверь интерактивные состояния.

.avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  overflow: hidden;
}

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

• Скрывать фокус клавиатуры.
• Создавать две вложенные прокрутки.
• Не ограничивать размер перед overflow: auto.
• Обрезать выпадающее меню родителем.

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

max-width · Таблицы HTML