Hoe werken de overflow-eigenschap en scroll containers?

Question

IT Interview Practice · Accepted Answer

`overflow` bepaalt wat er gebeurt wanneer de inhoud **te groot** is voor de box — of het wordt geknipt, scrollt, of uitsluit.

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

## Afzonderlijke assen

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

Een veelgebruikt patroon: horizontaal overloop voorkomen terwijl verticaal scrollen wordt toegestaan.

## Een scroll container maken

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

De sleutel: een scroll container heeft een **beperkte grootte** (`height`/`max-height`) *plus* `overflow: auto` nodig. Zonder groottebeperkingen groeit de box gewoon en scrollt nooit.

## Een subtiel maar belangrijk bijeffect: overflow creates a block formatting context

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

Het instellen van `overflow` op alles anders dan `visible` stelt een nieuwe **block formatting context** in, die zwevende kinderen bevat en marge inklapstoten voorkomt — historisch gebruikt als "clearfix".

## Moderne scroll-functies

```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` bouwt carousels zonder JS; `overscroll-behavior` stopt een gescrolde panel ook van het scrollen van de pagina erachter (geweldig voor modals/chatvensters).

## Waarom het belangrijk is

`overflow` beheerst scrollgebieden, tekstknippen (met `text-overflow: ellipsis`), en modal/panel scroll-gedrag.

Weten dat scroll containers een groottebeperkingen nodig hebben, dat `overflow` een formatting context maakt, en moderne helpers (`scroll-snap`, `overscroll-behavior`) dekt de praktische lay-out en UX-behoeften rond overloop.

Afzonderlijke assen

Een scroll container maken

Een subtiel maar belangrijk bijeffect: overflow creates a block formatting context

Moderne scroll-functies

Waarom het belangrijk is

Gerelateerde vragen