Kuinka overflow-ominaisuus ja vierityssäiliöt toimivat?

Question

Accepted Answer

`overflow` hallitsee, mitä tapahtuu, kun sisältö on **liian suuri** laatiolleen — onko se leikattu, vieritettävä vai vuotaa yli.

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

## Erilliset akselit

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

Yleinen kuvio: estä vaakasuora ylivuo ja salli samalla pystysuora vieritys.

## Vierityssäiliön luominen

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

Avain: vierityssäiliö tarvitsee **rajoitetun koon** (`height`/`max-height`) *sekä* `overflow: auto`. Ilman kokorajoitusta laatikko vain kasvaa eikä koskaan vieritä.

## Hieno mutta tärkeä sivuvaikutus: overflow luo lohkon muotoilukontekstin

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

`overflow`-arvon asettaminen mihin tahansa muuhun kuin `visible` muodostaa uuden **lohkon muotoilukontekstin**, joka sisältää kelluvat lapset ja estää marginaalien romahtamisen — historiallisesti käytetty "clearfix"-ratkaisuna.

## Modernit vieritysominaisuudet

```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` rakentaa karuselleja ilman JS:ää; `overscroll-behavior` estää vieritetyn paneelin vierittämästä myös sen taakse olevaa sivua (loistava modaaleille/chat-ikkunoille).

## Miksi sillä on merkitystä

`overflow` hallitsee vieritysalueita, tekstin leikkaamista (`text-overflow: ellipsis` kanssa) ja modaalin/paneelin vierityslogiikkaa.

Tietämys siitä, että vierityssäiliöt vaativat kokorajoitusta, että `overflow` luo muotoilukontekstin, ja että modernit apuohjelmat (`scroll-snap`, `overscroll-behavior`) kattavat overflow-ominaisuuksien käytännön asettelun ja UX-tarpeet.