Kepiye overflow property lan scroll containers iku bisa urip?

Question

Accepted Answer

`overflow` ngontrol apa sing kelakon nalika konten iku **luwih gede** tinimbang bokse — apa dipenak, gulung, utawa mletuk metu.

```css
.box { overflow: visible; }  /* default — content spills OUT of the box */
.box { overflow: hidden; }   /* clipped — overflowing content is cut off */
.box { overflow: scroll; }   /* always shows scrollbars (even if not needed) */
.box { overflow: auto; }     /* scrollbars appear ONLY when needed (best) */
```

## Pisah aksès

```css
.box {
  overflow-x: hidden;  /* clip horizontal */
  overflow-y: auto;    /* scroll vertical when needed */
}
```

Pola lumrah: cegah overflow horisontal nalika ngadhepi gulungan vertikal.

## Nggawe scroll container

```css
.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.

## Efek sing halus nanging penting: overflow nggawe block formatting context

```css
.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".

## Fitur gulungan modern

```css
.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).

## Apa sing penting

`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.