overflow, içeriğin kutusu için çok büyük olması durumunda ne olacağını denetler — kırpılıp kırpılmayacağı, kaymayacağı veya dışarıya taşacağı.
{ : visible; }
{ : hidden; }
{ : scroll; }
{ : auto; }
.box {
overflow-x: hidden; /* clip horizontal */
overflow-y: auto; /* scroll vertical when needed */
}
Yaygın bir desen: yatay taşmayı engelleme, dikey kaymaya izin verme.
.scroll-area {
max-height: 400px; /* constrain the height */
overflow-y: auto; /* content beyond 400px scrolls */
}
Anahtarı: bir scroll container kısıtlanmış bir boyuta (height/max-height) artı overflow: auto gereksinim duyar. Boyut sınırlaması olmadan kutu büyür ve asla kaymaz.
.clearfix { overflow: hidden; } /* contains floats / stops margin collapse */
overflow öğesini visible dışında bir şeye ayarlamak yeni bir block formatting context oluşturur, bu da yüzen alt öğeleri içerir ve margin çökmesini engeller — tarihsel olarak "clearfix" olarak kullanılmıştır.
.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 olmadan karuseleller oluşturur; overscroll-behavior kaydırılan paneli arkasındaki sayfayı da kaydırmaktan durdurur (modallar/sohbet pencereleri için harika).
overflow kaydırma alanlarını, metin kırpmasını (text-overflow: ellipsis ile) ve modal/panel kaydırma davranışını yönetir.
Scroll container'ların bir boyut kısıtlamasına ihtiyaç duyduğunu, overflow bir biçimlendirme bağlamı oluşturduğunu ve modern yardımcıların (scroll-snap, overscroll-behavior) overflow etrafındaki pratik düzen ve UX ihtiyaçlarını kapsadığını bilmek.