overflow ngontrol apa sing kelakon nalika konten iku luwih gede tinimbang bokse — apa dipenak, gulung, utawa mletuk metu.
{ : visible; }
{ : hidden; }
{ : scroll; }
{ : auto; }
.box {
overflow-x: hidden; /* clip horizontal */
overflow-y: auto; /* scroll vertical when needed */
}
Pola lumrah: cegah overflow horisontal nalika ngadhepi gulungan vertikal.
.scroll-area {
max-height: 400px; /* constrain the height */
overflow-y: auto; /* content beyond 400px scrolls */
}
Kunci: scroll container kudu duwe ukuran sing diwatesi (height/max-height) plus overflow: auto. Tanpa wates ukuran, bokse mung bakal tumuwuh lan ora bakal gulung.
.clearfix { overflow: hidden; } /* contains floats / stops margin collapse */
Menetapke overflow menyang apa wae kajaba visible nggawe block formatting context anyar, kang muat anak-anak float lan nyegah margin collapsing — biyen dianggo minangka "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 nulis carousel tanpa JS; overscroll-behavior mandheg panel sing gulung saka uga gulung kaca ndluwur (apik banget kanggo modal/chat window).
overflow ngatur area gulungan, clipping teks (karo text-overflow: ellipsis), lan perilaku gulungan modal/panel.
Ngerti yen scroll container kudu duwe wates ukuran, yen overflow nggawe formatting context, lan pembantu modern (scroll-snap, overscroll-behavior) nutupi kabutuhan layout lan UX praktis watara overflow.