Yaya overflow property da scroll containers suke aiki?

Question

Accepted Answer

`overflow` yana sarrafa abin da ya faru lokacin da abun ya yi babbar girma ga akwatinsa — ko an yanke shi, ko ya yi scrollin, ko ya baje ko ya fito.

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

## Bangarorin daban

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

Albarka mai saba: hana overflow na gida yayin da ake barin scroll na tsaye.

## Tsarawa scroll container

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

Makullin aiki: scroll container yana bukatar **size mai iyaka** (`height`/`max-height`) *da* `overflow: auto`. A bai yi karancin size ba, akwatin shi kawai ya haɓaka ba kuma ba ya yi scrollin.

## Sakamakon tsoro amma mahalaca: overflow yana aiki block formatting context

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

Saita `overflow` zuwa kome sai `visible` yana aiki sabon **block formatting context**, wanda ya dauke jariyan floated yara da ya hana margin collapsing — a gida an yi amfani da shi azaman "clearfix".

## Sifofin scroll na zamani

```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` yana gina carousel ba tare da JS ba; `overscroll-behavior` ya dakila panel mai scroll daga scrollin shafin da ya fito (ya yi kyau sosai don modals/chat windows).

## Me yasa yana da muhimmanci

`overflow` yana tawali da scroll areas, yanke rubutu (tare da `text-overflow: ellipsis`), da modal/panel scroll jiya.

Sanin cewa scroll containers suna bukatar size constraint, cewa `overflow` yana tsara formatting context, da kuma modern taimaki (`scroll-snap`, `overscroll-behavior`) yana rufe aiwatacciyar layout da UX bukatun kusa da overflow.