Cum funcționează proprietatea overflow și containerele de scroll?

Question

Accepted Answer

`overflow` controlează ce se întâmplă atunci când conținutul este **prea mare** pentru caseta sa — fie că este tăiat, se derulează sau se varsă.

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

## Axe separate

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

Un pattern frecvent: preveni overflow orizontal în timp ce permite derulare verticală.

## Crearea unui container de scroll

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

Cheia: un container de scroll are nevoie de o **dimensiune constrânsă** (`height`/`max-height`) *plus* `overflow: auto`. Fără o limită de dimensiune, caseta pur și simplu crește și nu se derulează niciodată.

## Un efect secundar subtil dar important: overflow creează un context de formatare bloc

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

Setarea `overflow` la orice altceva decât `visible` stabilește un nou **context de formatare bloc**, care conține copii plutitori și previne colapsul marginii — folosit istoric ca un "clearfix".

## Funcții moderne de scroll

```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` construiește carouseluri fără JS; `overscroll-behavior` oprește un panou derulat de la derularea și a paginii din spatele lui (minunat pentru modale/ferestre de chat).

## De ce este important

`overflow` guvernează zonele de derulare, tăierea textului (cu `text-overflow: ellipsis`) și comportamentul derulării modal/panou.

Cunoscând că containerele de scroll au nevoie de o constrângere de dimensiune, că `overflow` creează un context de formatare și că ajutoarele moderne (`scroll-snap`, `overscroll-behavior`) acoperă nevoile practice de layout și UX în jurul overflow.