overflow

Zuletzt aktualisiert am 15. Februar 2026

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.

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

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>

Horizontaler Overflow für Tabellen

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

.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>

overflow: hidden für gerundete Ecken

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

.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>

Scrollbarer Bereich mit fester Höhe

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

.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

• 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.
• 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.
• 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.
• 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.
• 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

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

Email-Kompatibilität

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

Verwandte Eigenschaften