Jak działają właściwość overflow i kontenery scroll?

Question

Accepted Answer

`overflow` kontroluje, co się dzieje, gdy zawartość jest **zbyt duża** dla swojego pudełka — czy zostaje przycięta, przewijana, czy wycieka na zewnątrz.

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

## Osobne osie

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

Częsty wzorzec: zapobieganie poziomemu przepełnieniu przy jednoczesnym zezwoleniu na przewijanie w pionie.

## Tworzenie kontenera scroll

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

Klucz: kontener scroll potrzebuje **ograniczonego rozmiaru** (`height`/`max-height`) *plus* `overflow: auto`. Bez ograniczenia rozmiaru, pudełko po prostu się rozszerza i nigdy się nie przewija.

## Subtelny, ale ważny efekt uboczny: overflow tworzy kontekst formatowania bloku

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

Ustawienie `overflow` na coś innego niż `visible` ustanawia nowy **kontekst formatowania bloku**, który zawiera elementy zmiennoprzecinkowe i zapobiega załamaniu marginesów — historycznie używane jako "clearfix".

## Nowoczesne funkcje 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` buduje karuzele bez JS; `overscroll-behavior` uniemożliwia przewijanemu panelowi przewijanie również strony za nim (świetne dla modali/okien czatu).

## Dlaczego to ważne

`overflow` reguluje obszary przewijania, przycięcie tekstu (z `text-overflow: ellipsis`) i zachowanie przewijania modali/paneli.

Wiedza, że kontenery scroll potrzebują ograniczenia rozmiaru, że `overflow` tworzy kontekst formatowania i nowoczesne narzędzia (`scroll-snap`, `overscroll-behavior`) obejmują praktyczne potrzeby layoutu i UX wokół overflow.