CSS – overflow verstehen

Jedes HTML-Element ist eine Box. Und manchmal ist der Inhalt größer als die Box selbst – zum Beispiel ein langer Text in einem Container mit fixer Höhe, oder ein Bild das breiter ist als sein Elternelement. Was dann passiert, steuert die CSS-Eigenschaft overflow.

Die Sprungmarken auf dieser Seite: Die Werte im Überblick, X und Y getrennt steuern, Typische Anwendungsfälle.

Die Werte im Überblick

overflow kennt vier Hauptwerte:

• visible – Standardwert. Der Inhalt ragt einfach aus dem Container heraus, ohne abgeschnitten zu werden.
• hidden – Alles was über den Rand hinausgeht wird abgeschnitten und ist nicht sichtbar. Kein Scrollbalken.
• scroll – Es erscheint immer ein Scrollbalken, auch wenn der Inhalt gar nicht überläuft.
• auto – Ein Scrollbalken erscheint nur dann, wenn der Inhalt tatsächlich überläuft. In der Regel die beste Wahl.

.box {
  width: 200px;
  height: 100px;
}

/* Inhalt ragt heraus – Standardverhalten */
.box-visible  { overflow: visible; }

/* Inhalt wird abgeschnitten */
.box-hidden   { overflow: hidden; }

/* Scrollbalken immer sichtbar */
.box-scroll   { overflow: scroll; }

/* Scrollbalken nur bei Bedarf */
.box-auto     { overflow: auto; }

X und Y getrennt steuern

Du kannst horizontalen und vertikalen Überlauf unabhängig voneinander steuern – mit overflow-x und overflow-y. Das ist zum Beispiel nützlich, wenn du einen Container hast der vertikal scrollbar sein soll, aber horizontal nichts herausragen darf.

.code-block {
  overflow-x: auto;   /* horizontal scrollen wenn nötig */
  overflow-y: hidden; /* vertikal nichts herausragen lassen */
  white-space: pre;   /* Zeilenumbrüche verhindern */
}

Ein häufiger Fall dafür sind Codeblöcke auf der eigenen Seite – langer Code soll horizontal gescrollt werden können, aber der Rest der Seite bleibt davon unberührt.

Typische Anwendungsfälle

overflow: hidden wird oft eingesetzt um abgerundete Ecken sauber zu halten – ohne es würde ein Bild oder ein Kindelement über den border-radius hinausragen:

.card {
  border-radius: 12px;
  overflow: hidden; /* Bild bleibt innerhalb der abgerundeten Ecken */
}

.card img {
  width: 100%;
  display: block;
}

overflow: auto eignet sich gut für Textbereiche mit fixer Höhe, zum Beispiel eine Beschreibungsbox in einem Produktlayout:

.beschreibung {
  height: 120px;
  overflow: auto; /* Scrollbalken nur wenn der Text länger ist */
  padding: 1rem;
  background: #f5f5f5;
}

Ein kleiner Hinweis noch: Wenn du overflow auf einen Container setzt, wird dieser automatisch zu einem sogenannten Block Formatting Context. Das beeinflusst unter anderem, wie floatende Kindelemente berechnet werden – in modernen Layouts mit Flexbox und Grid spielt das aber kaum noch eine Rolle.