Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >overflow

overflow

overflow: visible | hidden | clip | scroll | auto [ <vertical> ]

Entscheidet, was mit Inhalt geschieht, der nicht in ein Element passt: Er bleibt über den Rand hinaus sichtbar, wird abgeschnitten, oder das Element bekommt eine Bildlaufleiste. Ein Wert gilt für beide Richtungen, zwei getrennt für die waagerechte und die senkrechte (overflow-x, overflow-y).

Werte

  • visible – der Inhalt läuft über und ist sichtbar (Standard).
  • hidden – er wird abgeschnitten; scrollen lässt er sich nur per Skript oder beim Sprung zu einem Anker.
  • clip – er wird abgeschnitten und lässt sich überhaupt nicht scrollen.
  • scroll – immer eine Bildlaufleiste (auch wenn der Inhalt passt; auf Systemen mit ausgeblendeten Bildlaufleisten erscheint sie erst beim Scrollen).
  • auto – eine Bildlaufleiste nur, wenn der Inhalt nicht passt.

Initialwert: visible. Vererbt: nein. Gilt für: Blockelemente, Flex- und Grid-Container.

Beispiele

Derselbe Inhalt mit den Werten visible, hidden und auto:

<div class="box">visible: Text, der nicht ins Element passt, geht darunter weiter.</div>
<div class="box clipped">hidden: Text, der nicht ins Element passt, wird abgeschnitten.</div>
<div class="box scrolled">auto: Text, der nicht ins Element passt, lässt sich scrollen.</div>

.box {
  display: inline-block;
  vertical-align: top;
  width: 140px;
  height: 60px;
  margin: 4px 4px 50px;
  padding: 4px 8px;
  background: #eaf7ff;
  border: 1px solid #38b8f9;
}
.clipped { overflow: hidden; }
.scrolled { overflow: auto; }
Ergebnis
visible: Text, der nicht ins Element passt, geht darunter weiter.
hidden: Text, der nicht ins Element passt, wird abgeschnitten.
auto: Text, der nicht ins Element passt, lässt sich scrollen.

Eine breite Tabelle, die sich auf dem Handy waagerecht scrollen lässt, statt die Seite zu verbreitern:

<div class="wrapper">
  <table>…</table>
</div>

.wrapper {
  overflow-x: auto;
}

Worauf Sie achten sollten

  • Hat eine Richtung visible und die andere einen anderen Wert (außer clip), macht der Browser aus visible den Wert auto. Man kann also nicht nur waagerecht abschneiden und den Inhalt senkrecht überlaufen lassen.
  • Ein anderer Wert als visible (und clip) erzeugt einen Scroll-Container: Ein Nachfahre mit position: sticky haftet dann an ihm, nicht am Fenster, und „funktioniert“ scheinbar nicht.
  • overflow: hidden (und auto) umschließt die Floats im Inneren, genau wie display: flow-root.
  • overflow: hidden auf body oder html schaltet das Scrollen der ganzen Seite ab (z. B. unter einem geöffneten Dialog).

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 1, Firefox 1, Safari 1. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
height
max-height
display
visibility
text-overflow