CSS overflow: überlaufenden Inhalt steuern

Die CSS-Eigenschaft overflow legt fest, was mit Inhalt geschieht, der größer ist als sein Container: visible lässt ihn überstehen, hidden und clip schneiden ihn ab, scroll und auto machen den Bereich scrollbar.

Überlauf entsteht, sobald eine feste Höhe, eine feste Breite oder ein langes Wort nicht mehr in die Box passt. Jeder Wert außer visible schneidet den Inhalt an der Padding-Box ab und macht aus dem Element einen Scroll-Container. An dieser Deklaration hängen deshalb Formatierungskontext, Positionierung, position: sticky und der Tastaturzugang zum abgeschnittenen Teil.

In Audits ist overflow die Eigenschaft mit den meisten Treffern. Abgeschnittener Text bei 200 Prozent Zoom, eine Tabelle ohne Tastaturzugang und ein abgeschnittener Fokusring gehen oft auf dieselbe Zeile zurück.

Das Wichtigste in Kürze

• overflow hat fünf Werte. visible ist der Standard, hidden und clip schneiden ab, scroll und auto erzeugen einen scrollbaren Bereich.
• hidden bleibt per Skript scrollbar, clip unterbindet jedes Scrollen. Ein Fokuswechsel verschiebt einen Container mit hidden stumm.
• Eine Achse auf hidden zieht die andere mit. Neben overflow-x: hidden wird aus overflow-y: visible der berechnete Wert auto. overflow-x: clip vermeidet das.
• text-overflow: ellipsis wirkt nur mit drei Eigenschaften. Ohne white-space: nowrap und overflow: hidden erscheinen die drei Punkte nie.
• overflow: hidden an einer festen Höhe ist die häufigste Ursache für abgeschnittenen Text bei 200 Prozent Zoom und bei vergrößerten Textabständen.
• Ein scrollbarer Bereich braucht tabindex="0", role="region" und eine Beschriftung, damit Tastaturnutzende ihn erreichen.

Die CSS-overflow-Property und ihre fünf Werte

overflow ist die Kurzform für overflow-x und overflow-y. Bei zwei Werten steht die waagerechte Achse vorn.

.karte { overflow: hidden; }                      /* beide Achsen */
.karte { overflow: hidden auto; }                 /* x = hidden, y = auto */
.karte { overflow-x: hidden; overflow-y: auto; }  /* gleichbedeutend */

CSS overflow hidden und overflow clip im Vergleich

hidden erzeugt einen Scroll-Container ohne Bedienelement. Der Inhalt ist verborgen und bleibt beweglich. Ein element.scrollTop = 200 verschiebt ihn, und der Browser scrollt von selbst, sobald ein Element im abgeschnittenen Bereich den Fokus bekommt. Daraus entstehen die verrutschten Layouts nach einem Tabulator-Sprung.

clip schneidet ohne Scroll-Container ab. Der Inhalt bleibt an seiner Position fixiert. Zwei weitere Unterschiede zählen in der Praxis mehr:

• hidden erzeugt einen Block-Formatierungskontext und schließt damit Floats ein. clip erzeugt keinen. Dafür gibt es display: flow-root.
• clip lässt sich mit overflow-clip-margin erweitern, sodass ein Schatten oder ein Fokusring sichtbar bleibt.

.badge {
  overflow: clip;
  overflow-clip-margin: 4px; /* schneidet erst 4 px außerhalb der Padding-Box */
}

Stand September 2026 unterstützen alle aktuellen Browser overflow: clip. Die Werteliste im Detail steht in der MDN-Referenz zu overflow.

CSS overflow scroll und overflow auto

scroll legt den scrollbaren Bereich immer an. Auf Systemen mit klassischen Scrollbalken bleibt der Balken sichtbar, auch wenn nichts überläuft. auto blendet ihn nur bei Überlauf ein. Auf macOS und iOS mit Overlay-Scrollbalken sehen beide Werte gleich aus. Für Inhaltsbereiche ist auto die passende Wahl. Wer eine konstante Breite braucht, nimmt scrollbar-gutter statt scroll.

CSS overflow-x und overflow-y: eine Achse zieht die andere mit

Beide Achsen einzeln zu setzen ist erlaubt. Sobald eine Achse einen Wert außer visible und clip bekommt, verliert die andere ihr visible.

/* So geschrieben */
.wrapper {
  overflow-x: hidden;
  overflow-y: visible;
}

/* So berechnet der Browser */
.wrapper {
  overflow-x: hidden;
  overflow-y: auto; /* aus visible wird auto */
}

Die Folge fällt erst später auf. Der Wrapper ist jetzt ein Scroll-Container. Ein position: sticky darin richtet sich an ihm aus statt am Viewport und bleibt wirkungslos. Ein Dropdown, das aus der Box ragen soll, verschwindet. clip löst das:

/* Don't: erzeugt einen senkrechten Scroll-Container am ganzen Dokument */
body { overflow-x: hidden; }

/* Do: schneidet nur waagerecht ab, sticky und Dropdowns funktionieren weiter */
body { overflow-x: clip; }

clip und visible vertragen sich, weil die Umrechnungsregel nur für hidden, scroll und auto greift. Beide Varianten beseitigen allerdings nur das Symptom. Waagerechter Überlauf hat eine Ursache, und die liegt meist bei einer festen Breite, einem negativen Außenabstand oder einer fehlenden min-width: 0 in einer Flex-Spalte. Wie du sie findest, steht unter Reflow, Zoom und Textabstände.

CSS text-overflow: ellipsis braucht drei Eigenschaften

Die drei Punkte am Zeilenende entstehen aus dem Zusammenspiel dreier Eigenschaften. Fehlt eine davon, passiert nichts.

.titel {
  white-space: nowrap;     /* verhindert den Zeilenumbruch */
  overflow: hidden;        /* schneidet die Zeile ab */
  text-overflow: ellipsis; /* ersetzt das Abgeschnittene */
  max-width: 24ch;         /* irgendeine Begrenzung muss greifen */
}

<p class="titel" title="Barrierefreiheitserklärung für den Landkreis Nordwestmecklenburg">
  Barrierefreiheitserklärung für den Landkreis Nordwestmecklenburg
</p>

Die vierte Zutat wird oft vergessen. Ohne Breitenbegrenzung wächst das Element mit dem Text, und dann läuft nichts über. In einer Spalte aus Flexbox oder Grid übernimmt min-width: 0 diese Rolle.

.zeile { display: flex; gap: 1rem; }
.zeile > .titel { min-width: 0; } /* ohne diese Zeile greift ellipsis nie */

CSS overflow-wrap, word-break und hyphens beim Zeilenumbruch

Drei Eigenschaften greifen in denselben Fall ein. Sie wirken verschieden.

• overflow-wrap: break-word umbricht ein Wort erst dann, wenn es allein in einer Zeile keinen Platz hat. Das ist der Wert für Fließtext mit langen URLs oder Bestellnummern.
• word-break: break-all erlaubt den Umbruch an jeder Stelle, auch mitten im Wort ohne Not. Für lateinische Schrift wird der Text damit unleserlich.
• hyphens: auto trennt nach den Silbenregeln der Sprache und setzt einen Trennstrich. Das setzt ein korrektes lang-Attribut am <html>-Element voraus.

/* Do: Fließtext, der lange Zeichenketten verkraftet */
.prose {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Don't: zerlegt jedes Wort am Zeilenende */
.prose { word-break: break-all; }

overflow-wrap: anywhere zählt die Umbruchpunkte zusätzlich mit, wenn der Browser die Mindestbreite (min-content) berechnet, und lässt eine Flex-Spalte damit unter die Breite des längsten Wortes schrumpfen. Lange Zeichenketten sind eine der häufigsten Ursachen für waagerechtes Scrollen bei 320 Pixeln Breite, und genau dort verlangt 1.4.10 Reflow einen Umbruch.

Scrollbare Container richtig bauen

Ein scrollbarer Bereich besteht aus vier Bausteinen. overflow-x: auto erzeugt ihn, tabindex="0" macht ihn per Tastatur erreichbar, role="region" mit aria-labelledby gibt ihm einen Namen, und der Fokusstil macht den Fokus sichtbar.

<div class="tabelle-scroll" role="region" aria-labelledby="preise-titel" tabindex="0">
  <h3 id="preise-titel">Preise nach Bundesland</h3>
  <table>…</table>
</div>

.tabelle-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.tabelle-scroll:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

Dieses Muster ist der erlaubte Weg für Inhalte mit zweidimensionalem Layout. Mehr steht unter komplexe Datentabellen und Tabellen semantisch aufbauen.

scrollbar-gutter gegen springende Layouts

Ein Scrollbalken, der erscheint und wieder verschwindet, verschiebt den Inhalt um 15 bis 17 Pixel. Sichtbar wird das beim Öffnen eines Dialogs und beim Wechsel zwischen kurzen und langen Seiten.

html {
  scrollbar-gutter: stable;
}

stable reserviert den Platz dauerhaft, stable both-edges auf beiden Seiten. Auf Systemen mit Overlay-Scrollbalken bleibt die Eigenschaft wirkungslos. Stand September 2026 unterstützen Chrome, Firefox und Safari sie, Safari seit Version 18.2.

overscroll-behavior und das Scroll-Chaining

Wer am Ende eines scrollbaren Bereichs weiterscrollt, bewegt die Seite dahinter. Dieses Weiterreichen heißt Scroll-Chaining.

.dialog-inhalt {
  overflow-y: auto;
  overscroll-behavior: contain;
}

contain hält das Scrollen im Bereich. none unterbindet zusätzlich das Gummiband auf iOS und das Ziehen zum Neuladen auf Android. Den vollständigen Aufbau beschreibt die Seite zu Dialogen und Modals.

scroll-margin-top für Sprungziele unter klebenden Headern

Ein klebender Header verdeckt das Sprungziel, weil der Browser das Ziel an den oberen Rand des Scrollports scrollt.

/* am Ziel */
[id] { scroll-margin-top: 6rem; }

/* oder am scrollenden Element, dann gilt es für jedes Ziel */
html { scroll-padding-top: 6rem; }

scroll-padding-top am scrollenden Element ist die robustere Variante. Sie wirkt für Anker-Links, für den Sprung zum Hauptinhalt und für den Fokus nach einer Fehlermeldung. Weiches Scrollen gehört in eine Media-Query, wie es die Seite zu CSS-Animationen zeigt.

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

Warum overflow: hidden am body Probleme verursacht

Der Wert am body bleibt selten dort. Solange am <html>-Element overflow: visible steht, gilt er für den Viewport. body { overflow: hidden } schaltet damit das Scrollen der ganzen Seite ab.

Als Scroll-Sperre für Dialoge hat dieser Griff drei Nebenwirkungen. Der Scrollbalken verschwindet und das Layout springt, wogegen scrollbar-gutter: stable hilft. iOS-Safari scrollt den Hintergrund unter bestimmten Bedingungen weiter. Der Scroll-Offset geht in manchen Kombinationen verloren. Ein natives <dialog> mit showModal() kommt ohne diesen Eingriff aus.

Dasselbe gilt für html, body { height: 100%; overflow: hidden } in App-Layouts. Das kostet die Scroll-Wiederherstellung des Browsers und das Ausblenden der Adressleiste auf Mobilgeräten.

Stacking-Context, sticky und abgeschnittene Dropdowns

Ein Scroll-Container erzeugt für sich genommen keinen Stacking-Context. Er schneidet trotzdem alles ab, was über seine Padding-Box hinausragt, und z-index ändert daran nichts. Nachfahren mit position: absolute entkommen dem Schnitt nur, wenn ihr enthaltender Block außerhalb liegt. Sobald der Container position: relative hat, endet das Dropdown an der Kante.

/* Don't: das Menü wird an der Kante der Karte abgeschnitten */
.karte { overflow: hidden; position: relative; }
.karte .menue { position: absolute; top: 100%; }

Drei Auswege sind gebräuchlich. Das popover-Attribut hebt das Element in die Top-Layer. position: fixed löst es aus dem Container, solange kein Vorfahre eine Transformation oder einen Filter setzt. Der dritte Weg ist der Verzicht auf overflow: hidden, etwa mit border-radius an den Kindern. Welche Regel dabei gewinnt, entscheidet die Spezifität.

position: sticky im Scroll-Container

position: sticky richtet sich am nächsten Scroll-Container aus. Das ist der nächste Vorfahre mit einem overflow-Wert außer visible und clip, ersatzweise der Viewport. Daraus folgen die zwei häufigsten Fehlersuchen:

1. Ein Vorfahre hat overflow: hidden oder overflow: auto. Das sticky-Element klebt jetzt in diesem Container. Scrollt der Container nie, geschieht nichts.
2. Der direkte Elternbereich ist so hoch wie das sticky-Element. Zum Kleben braucht das Element Weg im Elternelement. Bei gleicher Höhe gibt es keinen.

Im scrollbaren Bereich ist sticky die richtige Wahl für Tabellenköpfe:

.tabelle-scroll { overflow: auto; max-height: 70vh; }

.tabelle-scroll thead th {
  position: sticky;
  top: 0;
  background: Canvas; /* ohne Hintergrund scrollt der Inhalt sichtbar darunter */
}

Barrierefreiheit: worauf es ankommt

Abgeschnittener Text bei Zoom und größeren Abständen

overflow: hidden an einem Element mit fester Höhe ist die häufigste Ursache für abgeschnittenen Text. Bei 200 Prozent Textzoom benötigt dieselbe Zeile doppelt so viel Platz, bei erzwungenen Textabständen rund ein Drittel mehr. Die Box hält ihre Höhe, und der Rest verschwindet ohne Zugang. Betroffen sind drei Kriterien: 1.4.4 Textgröße ändern, 1.4.10 Reflow und 1.4.12 Textabstände.

/* Don't: schneidet ab, sobald der Text mehr Platz benötigt */
.karte { height: 180px; overflow: hidden; }

/* Do: die Box wächst mit */
.karte { min-height: 180px; }

Für Buttons mit fester Breite gilt dasselbe: padding statt width. Den Prüfweg zeigt Barrierefreiheit selbst testen.

Waagerechtes Scrollen der ganzen Seite

Bei 320 CSS-Pixeln Breite darf der Inhalt nicht in zwei Richtungen scrollen. Die Herleitung beschreibt das W3C in Understanding SC 1.4.10 Reflow. overflow-x: hidden am body beseitigt den Scrollbalken und den Zugang zum Inhalt in einem Schritt. Der abgeschnittene Teil zählt als verlorener Inhalt. Ausgenommen sind Elemente mit zweidimensionalem Layout, etwa Datentabellen und Karten. Diese Ausnahme gilt für das Element allein. Die Seite drumherum muss umbrechen.

Scrollbare Bereiche und die Tastatur

Ein Bereich mit overflow: auto ist mit Maus und Finger bedienbar. Für die Tastatur muss er den Fokus bekommen können. Chrome macht Scroll-Container ohne fokussierbare Kinder seit Version 127 von selbst fokussierbar, Firefox ähnlich. Safari macht das Stand September 2026 nicht. tabindex="0" bleibt deshalb der verlässliche Weg und erfüllt 2.1.1 Tastatur.

Der Bereich benötigt zusätzlich einen Namen. Ohne Beschriftung fällt role="region" in den meisten Screenreadern aus der Landmarken-Liste heraus. Umgekehrt erzeugt ein Container mit tabindex="0" ohne Überlauf einen Fokusstopp ohne Zweck. Wie sich das in der Bedienung auswirkt, beschreibt die Seite zur Tastatur- und Switch-Bedienung.

text-overflow: ellipsis versteckt Information

Die drei Punkte zeigen an, dass etwas fehlt. Der volle Text bleibt dabei visuell unerreichbar. Im DOM steht er weiterhin, und Screenreader lesen ihn ganz vor. Das Problem betrifft sehende Nutzende. Bei Menschen, die mit Bildschirmvergrößerung arbeiten, entsteht der Abschnitt bereits bei geringem Zoom.

Zwei Wege führen heraus. Der volle Text steht im title-Attribut, oder er umbricht sichtbar in zwei Zeilen. Die zweite Lösung ist die bessere, denn title erscheint auf Touchgeräten nicht. Die mehrzeilige Kürzung mit -webkit-line-clamp hat dasselbe Problem.

Der abgeschnittene Fokusring

Ein Fokusring wird mit outline außerhalb der Border-Box gezeichnet, und outline-offset schiebt ihn weiter nach außen. Ein Vorfahre mit overflow: hidden schneidet ihn dort ab. Der Fokus ist dann nur an drei Seiten sichtbar, was gegen 2.4.7 Fokus sichtbar verstößt. overflow: clip mit overflow-clip-margin: 3px lässt den Ring stehen.

Der zweite Fall ist der klebende Header. Wer mit der Tabulatortaste durch eine lange Seite geht, landet auf einem Element, das der Header verdeckt. scroll-margin-top am fokussierbaren Element löst das und erfüllt 2.4.11 Fokus nicht verdeckt.

Häufige Fragen

Was ist der Unterschied zwischen overflow: scroll und overflow: auto?

scroll legt den scrollbaren Bereich immer an. Auf Systemen mit klassischen Scrollbalken bleibt der Balken sichtbar, auch wenn nichts überläuft. auto blendet ihn nur bei Überlauf ein und ist für Inhaltsbereiche die passende Wahl. Gegen den Layout-Sprung beim Erscheinen des Balkens hilft scrollbar-gutter: stable am <html>-Element.

Warum wirkt text-overflow: ellipsis bei mir nicht?

Meist fehlt eine der drei nötigen Eigenschaften. white-space: nowrap verhindert den Zeilenumbruch, overflow: hidden schneidet ab, text-overflow: ellipsis setzt die Punkte. Wirkt es weiterhin nicht, fehlt die Breitenbegrenzung. Ein Element ohne max-width oder ohne min-width: 0 in einer Flex-Spalte wächst mit dem Text, und dann läuft nichts über.

Warum setzt overflow-x: hidden auch overflow-y auf auto?

Die CSS-Spezifikation schließt die Kombination aus einer abgeschnittenen und einer sichtbaren Achse aus. Sobald eine Achse hidden, scroll oder auto bekommt, wird aus visible auf der anderen Achse der Wert auto. Das Element ist damit ein Scroll-Container, was position: sticky und Kinder mit position: absolute beeinflusst. Mit overflow-x: clip bleibt overflow-y: visible erhalten.

Was ist der Unterschied zwischen overflow-wrap und word-break?

overflow-wrap: break-word greift erst, wenn ein Wort allein in einer Zeile keinen Platz hat. Der übrige Text fließt normal. word-break: break-all erlaubt den Umbruch an jeder Stelle, auch dort, wo genug Platz wäre. Für deutschen Fließtext passt overflow-wrap: break-word mit hyphens: auto. word-break zielt auf CJK-Schriften.

Wann ist CSS overflow hidden ein Fehler in der Barrierefreiheit?

Die Eigenschaft selbst ist neutral. Der Fehler entsteht in der Kombination mit fester Höhe oder fester Breite. Dann verschwindet Text bei 200 Prozent Zoom oder bei größeren Textabständen ohne Zugang, was gegen 1.4.4, 1.4.10 und 1.4.12 verstößt. Mit min-height statt height und max-width statt width bleibt overflow: hidden unbedenklich.

Verwandte Themen

• CSS-Referenz im Überblick ordnet die Eigenschaften für zugängliche Websites ein.
• Reflow, Zoom und Textabstände enthält das Testrezept für 320 Pixel und 200 Prozent.
• Komplexe Datentabellen zeigt den scrollbaren Tabellenbereich im Zusammenhang.
• Flexbox und Grid erklären, warum min-width: 0 in Layout-Spalten so oft fehlt.
• Tastatur und Fokus beschreibt die Prüfung scrollbarer Bereiche.