Jak funguje vlastnost overflow a kontejnery scrollování?

Question

Accepted Answer

`overflow` určuje, co se stane, když je obsah **příliš velký** pro svůj box — zda bude oříznuta, scrollovat se nebo vycházet ven.

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

## Oddělené osy

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

Častý vzor: zabránit horizontálnímu overflow a přitom umožnit vertikální scroll.

## Vytvoření scrollovacího kontejneru

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

Klíč: scrollovací kontejner potřebuje **omezená velikost** (`height`/`max-height`) *plus* `overflow: auto`. Bez omezení velikosti se box jednoduše zvětšuje a nikdy se neposunuje.

## Jemný, ale důležitý vedlejší účinek: overflow vytváří kontext blokového formátování

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

Nastavení `overflow` na cokoliv jiného než `visible` vytváří nový **kontext blokového formátování**, který obsahuje plovoucí potomky a zabraňuje sjednocování okrajů — historicky používáno jako "clearfix".

## Moderní funkce scrollování

```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` vytváří karusely bez JS; `overscroll-behavior` zastaví scrollování panelu také scrollování stránky za ním (skvělé pro modály/okna chatu).

## Proč je to důležité

`overflow` řídí oblasti scrollování, ořezávání textu (s `text-overflow: ellipsis`) a chování scrollování modálů/panelů.

Znalost toho, že scrollovací kontejnery potřebují omezení velikosti, že `overflow` vytváří kontext formátování a moderní pomocníci (`scroll-snap`, `overscroll-behavior`) pokrývají praktické potřeby layoutu a UX kolem overflow.