Bagaimana properti overflow dan scroll containers bekerja?

Question

Accepted Answer

`overflow` mengontrol apa yang terjadi ketika konten **terlalu besar** untuk kotak-nya — apakah terpotong, bergulir, atau tumpah keluar.

```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) */
```

## Sumbu terpisah

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

Pola umum: cegah overflow horizontal sambil memungkinkan scroll vertikal.

## Membuat scroll container

```css
.scroll-area {
  max-height: 400px;   /* constrain the height */
  overflow-y: auto;    /* content beyond 400px scrolls */
}
```

Kunci: scroll container membutuhkan **ukuran terbatas** (`height`/`max-height`) *plus* `overflow: auto`. Tanpa batasan ukuran, kotak hanya tumbuh dan tidak pernah bergulir.

## Efek samping yang halus namun penting: overflow menciptakan block formatting context

```css
.clearfix { overflow: hidden; } /* contains floats / stops margin collapse */
```

Mengatur `overflow` ke apa pun selain `visible` membentuk **block formatting context** baru, yang berisi anak-anak mengambang dan mencegah margin collapsing — secara historis digunakan sebagai "clearfix".

## Fitur scroll 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` membangun carousel tanpa JS; `overscroll-behavior` menghentikan panel yang digulir agar juga tidak menggulir halaman di belakangnya (bagus untuk modal/jendela chat).

## Mengapa ini penting

`overflow` mengatur area bergulir, pemotongan teks (dengan `text-overflow: ellipsis`), dan perilaku scroll modal/panel.

Mengetahui bahwa scroll containers memerlukan batasan ukuran, bahwa `overflow` menciptakan formatting context, dan pembantu modern (`scroll-snap`, `overscroll-behavior`) mencakup kebutuhan tata letak dan UX praktis di sekitar overflow.