CSS Overflow

Overflow entsteht, wenn Inhalt mehr Platz benötigt, als in einer Box verfügbar ist. Das kann beispielsweise durch lange Texte, grosse Bilder oder eine begrenzte Breite oder Höhe entstehen. Mit overflow legst du fest, ob der überstehende Inhalt sichtbar bleibt, abgeschnitten wird oder scrollbar ist.

overflow ist eine Kurzschreibweise für overflow-x und overflow-y. Ein Wert gilt für beide Achsen. Bei zwei Werten gilt der erste für die x-Achse und der zweite für die y-Achse.

.element {
    overflow: auto;        /* x und y */
    overflow: auto hidden; /* x | y */
}

---

Overflow Werte

Overflow entsteht häufig durch eine feste Breite oder Höhe, kann aber auch durch maximale Grössen wie max-width oder max-height entstehen.

• visibleStandard – Inhalt läuft aus der Box heraus
• hiddenInhalt wird abgeschnitten
• scrollScrollbars werden immer angezeigt
• autoScrollbars erscheinen nur bei Bedarf
• clipInhalt wird abgeschnitten, ohne Scroll-Möglichkeit
• overflow-xhorizontalen Overflow steuern
• overflow-yvertikalen Overflow steuern
• overflow-inlineOverflow in Leserichtung steuern
• overflow-blockOverflow in Blockrichtung steuern

---

1. overflow: visible

Der Standardwert. Inhalt, der über die Begrenzung eines Elements hinausragt, bleibt sichtbar und kann benachbarte Elemente überlagern.

div {
  width: 250px;
  height: 100px;
  overflow: visible;
}

Wichtig: Überstehender Inhalt kann andere Elemente optisch überlagern, ohne deren Position zu verändern.

---

2. overflow: hidden

Alles, was über den Rand eines Elements hinausragt, wird abgeschnitten und ist nicht mehr sichtbar. Es werden keine Scrollbars angezeigt.

div {
  width: 250px;
  height: 100px;
  overflow: hidden;
}

Typische Einsatzbereiche:

• Bilder zuschneiden, ohne sie zu verkleinern
• Animationen, die ausserhalb einer Box starten oder enden

---

3. overflow: scroll

Es werden immer Scrollbars angezeigt – auch wenn der Inhalt vollständig in das Element passt.

div {
  width: 250px;
  height: 100px;
  overflow: scroll;
}

Hinweis: Auf macOS werden Scrollbars je nach Systemeinstellung oft nur während des Scrollens angezeigt. Auf Windows sind sie meist dauerhaft sichtbar.

---

4. overflow: auto

Scrollbars werden nur bei Bedarf angezeigt. Passt der Inhalt vollständig in das Element, bleiben sie ausgeblendet.

div {
  width: 250px;
  height: 100px;
  overflow: auto;
}

Empfehlung: overflow: auto ist in den meisten Fällen die beste Wahl, da Scrollbars nur angezeigt werden, wenn sie tatsächlich benötigt werden.

---

5. overflow: clip

Wie hidden, jedoch ohne Scroll-Möglichkeit. Der überstehende Inhalt wird abgeschnitten und lässt sich auch mit JavaScript nicht scrollen.

div {
  width: 250px;
  height: 100px;
  overflow: clip;
}

Unterschied zu hidden:

• hidden – Inhalt wird abgeschnitten, kann aber über JavaScript gescrollt werden.
• clip – Inhalt wird abgeschnitten und kann auch über JavaScript nicht gescrollt werden.

Einsatz: Sinnvoll, wenn Inhalte konsequent abgeschnitten werden sollen und kein Scrollen möglich sein darf.

---

6. overflow-x und overflow-y

Mit overflow-x und overflow-y lassen sich horizontaler und vertikaler Overflow unabhängig voneinander steuern.

div {
    white-space: nowrap; /* Zeilenumbruch verhindern */
    overflow-x: auto;    /* horizontal scrollen */
    overflow-y: hidden;  /* vertikalen Inhalt abschneiden */
}

Wichtig: Die beiden Achsen beeinflussen sich gegenseitig. Wird visible mit einem scrollbaren Overflow-Wert kombiniert, behandelt der Browser visible automatisch als auto.

Typische Einsatzbereiche sind breite Tabellen, Codeblöcke oder Bildergalerien, die nur horizontal gescrollt werden sollen.

---

7. overflow-inline und overflow-block

overflow-inline und overflow-block sind die logischen Varianten von overflow-x und overflow-y. Sie orientieren sich an der Schreibrichtung statt an einer festen horizontalen oder vertikalen Achse.

• overflow-inline – steuert den Overflow in Leserichtung, bei deutschen Texten normalerweise von links nach rechts.
• overflow-block – steuert den Overflow in Blockrichtung, bei deutschen Texten normalerweise von oben nach unten.

.element {
    overflow-inline: auto;
    overflow-block: hidden;
}

Vorteil: Die Angaben passen sich automatisch an die Schreibrichtung und den verwendeten Writing Mode an.

---

Praktische Beispiele

1. Scrollbarer Container

Ideal für Bereiche mit viel Inhalt, die innerhalb einer festen Höhe scrollbar bleiben sollen.

.scrollable {
    height: 300px;
    overflow-y: auto;
}

Achtung: Auf kleinen Screens hat es vielleicht zu viele Scrollbars.

---

2. Horizontales Scrollen

Typisch für breite Tabellen, Codeblöcke oder Bildergalerien.

.horizontal-scroll {
    overflow-x: auto;
    white-space: nowrap;
}

.item {
    display: inline-block;
}

---

3. Sticky Header mit Scroll

Der Header bleibt innerhalb des scrollbaren Containers sichtbar.

.container {
    height: 400px;
    overflow-y: auto;
}

.sticky-header {
    position: sticky;
    top: 0;
    background: deeppink;
    z-index: 10;
}

---

Typische Fehler

• overflow: hidden auf dem body verhindert das Scrollen der gesamten Seite (z. B. bei Modals jedoch gewollt).
• overflow: scroll statt auto – unnötige Scrollbars werden angezeigt.
• Vergessen, dass die Grösse eines Elements begrenzt sein muss, damit Inhalt abgeschnitten oder ein eigener Scrollbereich sichtbar wird.

---

Kurz gesagt

• overflow: visible ist der Standardwert und zeigt überstehenden Inhalt an.
• overflow: hidden schneidet überstehenden Inhalt ab.
• overflow: scroll zeigt Scrollbars immer an.
• overflow: auto ist meist die beste Wahl.
• overflow: clip schneidet Inhalt ab und verhindert auch das Scrollen per JavaScript.
• Die Kurzschreibweise overflow kann einen oder zwei Werte enthalten.
• overflow-x und overflow-y steuern die festen Achsen.
• overflow-inline und overflow-block orientieren sich an der Schreibrichtung.

---

Verwandte Themen

• CSS Scroll-Properties – Scrollverhalten, Snap-Punkte und Abstände zu Scroll-Zielen.
• Scrollbars – Breite, Farbe und Platz für Scrollleisten.
• Box Model – Grösse, Innenabstand, Rahmen und Aussenabstand von Elementen.
• Display – Verhalten von Elementen im Layout.

---