Kif jaħdem il-proprjetà `overflow` u l-kontenituri tal-iskroll?

Question

Accepted Answer

`overflow` tikontolla x'jiġri meta l-kontenut ikun **kbir wisq** għall-kaxxa tiegħu — kemm jekk ikun imqattal, jiskroll, jew jispicca barra.

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

## Assi separati

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

Pattern komuni: prevjeni l-overflow orizzontali filwaqt li tippermetti l-iskroll vertikali.

## Ħolqien ta' kontenitur tal-iskroll

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

Il-ħaġa importanti: kontenitur tal-iskroll jeħtieġ **daqs limitat** (`height`/`max-height`) *flimkien ma'* `overflow: auto`. Mingħajr limitu tad-daqs, il-kaxxa sempliċement tikber u qatt ma tiskroll.

## Effett sottili imma importanti: overflow jinħoloq block formatting context

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

L-issettaġ ta' `overflow` għal xi ħaġa għajr `visible` jistabbilixxi **block formatting context** ġdid, li għandu fih it-tfal lfutin u jipprevjeni l-kollass tal-marġini — storiċjament ġie użat bħala "clearfix".

## Karatteristiċi moderni tal-iskroll

```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` ibni karuselli mingħajr JS; `overscroll-behavior` waqqa' pannell miškroll milli jiskroll ukoll il-paġna waraħ (perfett għal modals/chat windows).

## Għaliex hu importanti

`overflow` jigvern ż-zones tal-iskroll, it-taqṭigħ tat-test (bl-`text-overflow: ellipsis`), u l-imġiba tal-iskroll tal-modal/panel.

L-għarfien li kontenituri tal-iskroll jeħtieġu limitu tad-daqs, li `overflow` jinħoloq formatting context, u għodod moderni (`scroll-snap`, `overscroll-behavior`) jkopri l-bżonnijiet prattiċi tal-layout u UX madwar overflow.