overflow управляет тем, что происходит, когда содержимое слишком велико для его окна — будет ли оно обрезано, прокручиваться или выходить за пределы.
{ : visible; }
{ : hidden; }
{ : scroll; }
{ : auto; }
.box {
overflow-x: hidden; /* clip horizontal */
overflow-y: auto; /* scroll vertical when needed */
}
Общий паттерн: предотвратить горизонтальное переполнение при допущении вертикальной прокрутки.
.scroll-area {
max-height: 400px; /* constrain the height */
overflow-y: auto; /* content beyond 400px scrolls */
}
Ключ: контейнер прокрутки требует ограниченный размер (height/max-height) плюс overflow: auto. Без ограничения размера окно просто растет и никогда не прокручивается.
.clearfix { overflow: hidden; } /* contains floats / stops margin collapse */
Установка overflow на что-либо, кроме visible, устанавливает новый контекст форматирования блока, который содержит плавающие дочерние элементы и предотвращает схлопывание отступов — исторически использовалось как "clearfix".
.gallery {
overflow-x: auto;
scroll-snap-type: x mandatory; /* snap to items while scrolling */
overscroll-behavior: contain; /* stop scroll "chaining" to the page */
}
.gallery > * { scroll-snap-align: start; }
scroll-snap строит карусели без JS; overscroll-behavior предотвращает прокрутку прокручиваемой панели также прокручивать страницу позади нее (отлично для модалей/окон чата).
overflow управляет областями прокрутки, обрезкой текста (с text-overflow: ellipsis) и поведением прокрутки модалей/панелей.
Знание того, что контейнеры прокрутки требуют ограничения размера, что overflow создает контекст форматирования, и современные вспомогательные инструменты (scroll-snap, overscroll-behavior) охватывают практические потребности макета и UX вокруг переполнения.