Bagaimana property overflow dan scroll container berfungsi?

Question

Accepted Answer

`overflow` mengawal apa yang berlaku apabila kandungan **terlalu besar** untuk kotaknya — sama ada ia dikerat, ditatal, atau melimpah 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) */
```

## Paksi berasingan

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

Satu corak biasa: menghalang limpahan mendatar sambil membenarkan tatalan menegak.

## Mencipta scroll container

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

Kuncinya: scroll container memerlukan **saiz yang terhad** (`height`/`max-height`) *serta* `overflow: auto`. Tanpa had saiz, kotak itu cuma membesar dan tidak pernah ditatal.

## Kesan sampingan yang halus tetapi penting: overflow mencipta block formatting context

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

Menetapkan `overflow` kepada apa-apa selain `visible` mewujudkan satu **block formatting context** baharu, yang mengandungi anak yang ter-float dan menghalang penguncupan margin (margin collapse) — secara sejarah digunakan sebagai "clearfix".

## Ciri scroll moden

```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` membina karusel tanpa JS; `overscroll-behavior` menghalang panel yang ditatal daripada turut menatal halaman di belakangnya (bagus untuk modal/tetingkap sembang).

## Mengapa ia penting

`overflow` mentadbir kawasan tatalan, pengeratan teks (dengan `text-overflow: ellipsis`), dan tingkah laku tatalan modal/panel.

Mengetahui bahawa scroll container memerlukan kekangan saiz, bahawa `overflow` mencipta formatting context, dan pembantu moden (`scroll-snap`, `overscroll-behavior`) merangkumi keperluan susun atur dan UX praktikal di sekitar overflow.