Wie funktioniert die overflow-Eigenschaft und Scroll-Container?

Question

Accepted Answer

`overflow` steuert, was passiert, wenn Inhalte **zu groß** für ihre Box sind — ob sie abgeschnitten werden, gescrollt werden oder überlaufen.

```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 Achsen

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

Ein häufiges Muster: horizontales Overflow verhindern, während vertikales Scrollen erlaubt wird.

## Erstellen eines Scroll-Containers

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

Der Schlüssel: Ein Scroll-Container benötigt eine **begrenzte Größe** (`height`/`max-height`) *plus* `overflow: auto`. Ohne Größenbeschränkung wächst die Box einfach und scrollt nie.

## Warum es wichtig ist: overflow erstellt einen Block-Formatting-Context

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

Das Setzen von `overflow` auf etwas anderes als `visible` etabliert einen neuen **Block-Formatting-Context**, der fließende Kinder enthält und Margin-Zusammenfallen verhindert — historisch als "clearfix" verwendet.

## Moderne Scroll-Funktionen

```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` erstellt Karussells ohne JS; `overscroll-behavior` verhindert, dass ein scrollter Panel auch die dahinter liegende Seite scrollt (großartig für Modals/Chat-Fenster).

## Warum es wichtig ist

`overflow` steuert Scroll-Bereiche, Text-Clipping (mit `text-overflow: ellipsis`) und Modal/Panel-Scroll-Verhalten.

Zu wissen, dass Scroll-Container eine Größenbeschränkung benötigen, dass `overflow` einen Formatting-Context erstellt, und dass moderne Helfer (`scroll-snap`, `overscroll-behavior`) die praktischen Layout- und UX-Anforderungen rund um overflow erfüllen.