Hvordan fungerer overflow-egenskapen og scroll-beholdere?

Question

Accepted Answer

`overflow` kontrollerer hva som skjer når innhold er **for stort** for boksen — enten det blir klippet, scrollet, eller renner av.

```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 vanlig mønster: forhindre horisontalt overløp mens du tillater vertikal rulling.

## Opprette en scroll-beholder

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

Nøkkelen: en scroll-beholder trenger en **begrenset størrelse** (`height`/`max-height`) *pluss* `overflow: auto`. Uten en størrelsesgrense vokser boksen bare og ruller aldri.

## En subtil men viktig bieffekt: overflow oppretter en blokk-formateringskontekst

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

Å sette `overflow` til noe annet enn `visible` etablerer en ny **blokk-formateringskontekst**, som inneholder flytende barn og forhindrer marginkollaps — historisk brukt som en "clearfix".

## Moderne rullefunksjoner

```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 uten JS; `overscroll-behavior` stopper et rullet panel fra også å rulle siden bak det (flott for modaler/chattvinduer).

## Hvorfor det er viktig

`overflow` styrer rulleområder, tekstklipping (med `text-overflow: ellipsis`), og modal/panel-rulleoppførsel.

Å vite at scroll-beholdere trenger en størrelsebegrensning, at `overflow` oppretter en formateringskontekst, og moderne hjelpere (`scroll-snap`, `overscroll-behavior`) dekker de praktiske layout- og UX-behovene rundt overløp.