Hvordan fungerer overflow-egenskaben og scroll-containere?

Question

Accepted Answer

`overflow` styrer, hvad der sker, når indholdet er **for stort** til sin boks — hvad enten det klippes af, scrolles, eller løber ud.

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

## Separate akser

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

Et almindeligt mønster: forhindre vandret overflow, mens du tillader lodret scroll.

## Oprettelse af en scroll-container

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

Nøglen: en scroll-container skal have en **begrænset størrelse** (`height`/`max-height`) *plus* `overflow: auto`. Uden en størrelsebegrænsning udvides boksen simpelthen, og den scrolles aldrig.

## En subtil men vigtig bivirkning: overflow skaber en blok-formateringssammenhæng

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

Indstilling af `overflow` til noget andet end `visible` etablerer en ny **blok-formateringssammenhæng**, som indeholder flydende børn og forhindrer margin-sammenfald — historisk brugt som en "clearfix".

## Moderne scroll-funktioner

```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` bygger karuseller uden JS; `overscroll-behavior` stopper en scrollet panel i også at scrolle siden bag den (fantastisk til modaler/chat-vinduer).

## Hvorfor det betyder noget

`overflow` styrer scroll-områder, tekstklipning (med `text-overflow: ellipsis`) og modal/panel-scroll-adfærd.

Kendskab til, at scroll-containere har brug for størrelsesbegrænsning, at `overflow` skaber en formateringssammenhæng, og moderne hjælpere (`scroll-snap`, `overscroll-behavior`) dækker de praktiske layout- og UX-behov omkring overflow.