overflow

overflow bestimmt, was mit Inhalt passiert, der über die Grenzen seines Containers hinausragt. Standardmäßig ist der überlaufende Inhalt sichtbar (visible). Du kannst ihn abschneiden (hidden), eine Scrollbar anzeigen (scroll) oder den Browser entscheiden lassen (auto). Mit overflow-x und overflow-y steuerst du jede Achse einzeln.

Steckbrief overflow

Syntax: overflow: visible | hidden | clip | scroll | auto
Initialwert: visible
Vererbt: Nein
Animierbar: Nein
Kurzform für: overflow-x, overflow-y

Kategorie: Box-Modell
Werte: 5
Beispiele: 4
Browser: 5 von 5
E-Mail: 1 von 5
Stand: 15.02.2026

Grundlagen

Overflow tritt auf, wenn der Inhalt eines Elements größer ist als die angegebene width oder height. Das passiert oft bei festen Höhen mit variablem Textinhalt, bei Bildern in schmalen Containern oder bei langen Wörtern ohne Umbruch.

Ein wichtiger Nebeneffekt: Jeder overflow-Wert außer visible erzeugt einen neuen Block Formatting Context (BFC). Das verhindert unter anderem Margin Collapsing und kann Floats einschließen.

Syntax & Werte

5 Werte

Wert	Beschreibung	Beispiel
`visible`	Überlaufender Inhalt ist sichtbar und ragt über die Box hinaus. (Standard)	overflow: visible
`hidden`	Überlaufender Inhalt wird abgeschnitten und ist nicht zugänglich.	overflow: hidden
`clip`	Wie hidden, aber verbietet auch programmatisches Scrollen.	overflow: clip
`scroll`	Scrollbar wird immer angezeigt, auch wenn kein Überlauf vorliegt.	overflow: scroll
`auto`	Scrollbar erscheint nur, wenn der Inhalt tatsächlich überläuft.	overflow: auto

Beispiele

4 Beispiele

Overflow-Werte im Vergleich

.ov-visible { overflow: visible; }
.ov-hidden  { overflow: hidden; }
.ov-scroll  { overflow: scroll; }
.ov-auto    { overflow: auto; }

<div class="demo-container">
<div class="overflow-box ov-visible"><strong>visible</strong><br>Dieser Text ist zu lang für die Box und ragt über den Rand hinaus. Der Überlauf ist sichtbar.</div>
<div class="overflow-box ov-hidden"><strong>hidden</strong><br>Dieser Text ist zu lang für die Box und ragt über den Rand hinaus. Der Überlauf wird abgeschnitten.</div>
<div class="overflow-box ov-scroll"><strong>scroll</strong><br>Dieser Text ist zu lang für die Box und ragt über den Rand hinaus. Es erscheint eine Scrollbar.</div>
<div class="overflow-box ov-auto"><strong>auto</strong><br>Dieser Text ist zu lang für die Box und ragt über den Rand hinaus. Scrollbar nur bei Bedarf.</div>
</div>

Breite Tabellen oder Code-Blöcke laufen auf kleinen Bildschirmen über. Mit overflow-x: auto auf einem Wrapper wird nur horizontal gescrollt.

Horizontal scrollbare Tabelle

.table-wrapper {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.wide-table {
  min-width: 600px;
  width: 100%;
}

<div class="table-wrapper">
<table class="wide-table">
  <tr><th>Name</th><th>Email</th><th>Rolle</th><th>Abteilung</th><th>Standort</th><th>Status</th></tr>
  <tr><td>Anna Müller</td><td>anna@firma.de</td><td>Entwicklerin</td><td>Engineering</td><td>Berlin</td><td>Aktiv</td></tr>
  <tr><td>Max Schmidt</td><td>max@firma.de</td><td>Designer</td><td>Design</td><td>München</td><td>Aktiv</td></tr>
</table>
</div>

Wenn ein Kind-Element (z.B. ein Bild) über die gerundeten Ecken des Elternelements hinausragt, kannst du mit overflow: hidden das Abschneiden erzwingen.

overflow: hidden bei border-radius

.card-no-clip {
  border-radius: 16px;
  border: 2px solid #1a56db;
  /* Bild ragt über die gerundeten Ecken */
}

.card-clip {
  border-radius: 16px;
  border: 2px solid #059669;
  overflow: hidden;
  /* Bild wird an den Ecken abgeschnitten */
}

<div class="card-no-clip">
<div style="width:100%;height:80px;background:#dbeafe;"></div>
<div class="card-body">Ohne overflow: hidden</div>
</div>
<div class="card-clip">
<div style="width:100%;height:80px;background:#d1fae5;"></div>
<div class="card-body">Mit overflow: hidden</div>
</div>

Für Chat-Fenster, Log-Ausgaben oder lange Listen ist overflow-y: auto mit einer festen Höhe die richtige Wahl.

Scrollbarer Bereich

.scroll-area {
  height: 120px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

<div class="scroll-area">
<p>Nachricht 1: Hallo, wie geht es dir?</p>
<p>Nachricht 2: Mir geht es gut, danke!</p>
<p>Nachricht 3: Was machst du gerade?</p>
<p>Nachricht 4: Ich lerne CSS overflow.</p>
<p>Nachricht 5: Das klingt spannend!</p>
<p>Nachricht 6: Ja, ist es auch!</p>
<p>Nachricht 7: Viel Erfolg dabei!</p>
<p>Nachricht 8: Danke dir!</p>
</div>

Barrierefreiheit

Niemals wichtigen Inhalt mit overflow: hidden abschneiden: Was abgeschnitten ist, bleibt für Tastaturnutzer und Screen-Reader-Nutzer unerreichbar. Verwende overflow: auto statt hidden, wenn der Inhalt zugänglich bleiben muss. Screen-Reader lesen auch abgeschnittenen Inhalt vor, aber Nutzer können ihn nicht erreichen, wenn keine Scrollbar da ist.

Scrollbare Bereiche brauchen Tastatur-Zugriff: Ein <div> mit overflow: auto ist standardmäßig nicht mit der Tastatur scrollbar. Füge tabindex="0" hinzu, damit Tastaturnutzer mit Tab hineintabben und scrollen können. Außerdem solltest du role="region" und aria-label="Name des Bereichs" setzen, damit Screen-Reader den scrollbaren Bereich ankündigen.

WCAG 1.4.10 Reflow: Inhalte sollten bei 320px Breite und 200% Zoom ohne horizontales Scrollen nutzbar sein. overflow-x: hidden kann diese Anforderung verletzen, wenn Inhalt dadurch abgeschnitten wird. Teste deine Layouts bei verschiedenen Viewport-Größen und Zoom-Stufen. Verwende flexible Layouts (Flexbox, Grid) statt fester Breiten, um Reflow-Probleme zu vermeiden.

Zoom und feste Höhen: Nutzer, die Text vergrößern, brauchen mehr Platz. Wenn du height: 200px; overflow: hidden setzt, wird bei größerer Schrift Inhalt abgeschnitten. Verwende min-height oder max-height mit overflow: auto, damit der Inhalt entweder wächst oder scrollbar wird, aber nie unerreichbar bleibt.

Häufige Fehler

5 Fehler

01 overflow: hidden schneidet wichtigen Inhalt ab

Anders als auto bietet hidden keine Möglichkeit, den abgeschnittenen Inhalt zu erreichen. Verwende auto, wenn der Inhalt zugänglich bleiben soll.

02 overflow: scroll zeigt immer Scrollbars

Auch wenn der Inhalt passt, werden Scrollbars angezeigt (besonders auf Windows/Linux). Verwende auto statt scroll, wenn die Scrollbar nur bei Bedarf erscheinen soll.

03 Overflow ohne feste Höhe oder Breite

overflow hat nur eine Wirkung, wenn die Box kleiner ist als ihr Inhalt. Ohne height oder max-height wächst die Box einfach mit und es gibt keinen Überlauf.

04 overflow: hidden als “clearfix”

Obwohl overflow: hidden einen BFC erstellt und Floats einschließt, kann es ungewollt Inhalte abschneiden. Verwende display: flow-root als modernen Ersatz.

05 Unterschiedliche Achsen vergessen

overflow-x: hidden; overflow-y: visible funktioniert nicht wie erwartet. Wenn eine Achse nicht visible ist, wird die andere automatisch auf auto statt visible gesetzt.

Browser-Kompatibilität

5 von 5

overflow, overflow-x und overflow-y werden von allen Browsern vollständig unterstützt. Der Wert clip ist in allen modernen Browsern verfügbar.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

1 von 5

overflow-Unterstützung in HTML-Emails ist stark eingeschränkt.

Apple Mail

Komplett
Gmail

Teilweise

overflow: hidden funktioniert, scroll und auto werden ignoriert
Outlook

Keine

Outlook ignoriert overflow komplett
Thunderbird

Teilweise

overflow: hidden funktioniert, Scrolling in Emails nicht zuverlässig
Yahoo Mail

Teilweise

Nur overflow: hidden wird zuverlässig unterstützt

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da