Hur fungerar overflow-egenskapen och scroll containers?

Question

Accepted Answer

`overflow` kontrollerar vad som händer när innehållet är **för stort** för sin box — oavsett om det klipps av, scrollas eller spills ut.

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

## Separata axlar

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

Ett vanligt mönster: förhindra horisontell overflow medan du tillåter vertikal scrollning.

## Skapa en scroll container

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

Nyckel: en scroll container behöver en **begränsad storlek** (`height`/`max-height`) *plus* `overflow: auto`. Utan en storleksgräns växer boxen bara och scrollas aldrig.

## En subtil men viktig bieffekt: overflow skapar en block formatting context

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

Om du ställer in `overflow` på något annat än `visible` etableras en ny **block formatting context**, som innehåller flytande barn och förhindrar marginal-sammanfattning — historiskt använd som en "clearfix".

## Moderna 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 utan JS; `overscroll-behavior` stoppar en scrollad panel från att också scrolla sidan bakom den (bra för modaler/chattfönster).

## Varför det spelar roll

`overflow` styr scrollningsområden, textklippning (med `text-overflow: ellipsis`) och modal/panel-scroll-beteende.

Att veta att scroll containers behöver en storleksbegränsning, att `overflow` skapar en formateringskontext och moderna hjälpmedel (`scroll-snap`, `overscroll-behavior`) täcker de praktiska layout- och UX-behoven kring overflow.