CSS overflow — синтаксис и примеры
CSS-свойство overflow: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Практический смысл
«overflow» рассматривается не как изолированный синтаксис, а как часть области «прокрутка и переполнение». Управляет отображением содержимого за границами padding-box. Практический контекст для «overflow» — в компоненте с русским и английским содержимым; во время проверки оставляйте DOM-порядок логичным для чтения.
Для «overflow» сначала сравните visible, hidden, clip и auto с клавиатурной прокруткой. После этого сравните исходное и изменённое состояние «overflow» на одном и том же содержимом.
Синтаксис overflow
Для демонстрации «overflow» используется короткий код с наблюдаемым результатом. Сохраните структуру примера, когда будете проверять другое значение.
.demo {
overflow: auto;
}Как работает overflow
Управляет отображением содержимого за границами padding-box. Для «overflow» проверьте две контрольные точки — результат при системной тёмной теме и результат при отключённом JavaScript: так видно, на каком этапе появляется итоговое поведение этой темы.
Проверка в проекте
- Сравните visible, hidden, clip и auto с клавиатурной прокруткой; результат относится непосредственно к «overflow».
- Проверить Chrome, Firefox и Safari для новой или экспериментальной возможности при разборе «overflow».
- Проверьте «overflow» в компоненте с русским и английским содержимым через результат при системной тёмной теме и запишите наблюдаемое изменение.
Выбор «overflow» оправдан, если задача относится к области «прокрутка и переполнение», а риск «overflow: hidden может скрыть фокус, подсказку или причину переполнения» исключён проверкой. Для «overflow» сравнивайте не внешний вид, а результат для пользователя.
Практика с overflow
Проверьте «overflow» в изолированном демо с длинным текстом, клавиатурным управлением и узким экраном. Отдельная проверка для «overflow»: сравните visible, hidden, clip и auto с клавиатурной прокруткой.
Сценарий: в компоненте с русским и английским содержимым.
Ошибки при работе с overflow
Каскад
Overflow: hidden может скрыть фокус, подсказку или причину переполнения — это предметный риск для «overflow».
Поддержка
Фиксированные размеры, которые перестают вмещать реальное содержимое при использовании «overflow».
Контекст
Загрузка тяжёлого ресурса до того, как он нужен пользователю; для «overflow» проверьте это отдельно.
Поддержка overflow
Для «overflow» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «overflow»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1, источник 2.
Вопросы о overflow
Как понять, что «overflow» выбрано правильно?
«overflow» выбрано правильно, когда оно решает задачу «управлять доступом к содержимому, которое выходит за границы контейнера», сохраняет результат в компоненте с русским и английским содержимым и проходит предметную проверку: сравните visible, hidden, clip и auto с клавиатурной прокруткой.
Нужен ли запасной вариант для «overflow»?
Запасной вариант для «overflow» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «overflow» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.