CSS Overflow

Sobald ein Element eine feste Breite oder Höhe (width, height) hat und der Inhalt mehr Platz benötigt als verfügbar ist, entsteht Overflow. Mit overflow legst du fest, ob der überstehende Inhalt sichtbar bleibt, abgeschnitten wird oder scrollbar ist.

overflow ist eine Kurzschreibweise und setzt gleichzeitig overflow-x und overflow-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: 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.

---

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

---

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.

---

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.

---

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.

---

overflow-x und overflow-y

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

div {
  overflow-x: auto;   /* horizontale Scrollbar bei Bedarf */
  overflow-y: hidden; /* vertikalen Inhalt abschneiden */
}

Wichtig: Browser verhalten sich nicht immer gleich. In diesem Fall ist das Verhalten jedoch standardisiert: Wird visible mit einem anderen 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.

---

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;
}

---

4. Hover Expand

Inhalte werden erst bei Bedarf eingeblendet und sparen Platz.

.expandable {
    height: 100px;
    overflow: hidden;
    transition: height 0.3s;
}

.expandable:hover {
    height: auto;
    max-height: 400px;
    overflow-y: auto;
}

Wichtig: Der Inhalt springt nach unten. Nicht in jedem Design verwenden.

---

Custom Scrollbars - Standard

Scrollbars können an das Design angepasst werden. Die Unterstützung unterscheidet sich jedoch je nach Browser.

Die Scrollbar wird auf dem äusseren Container definiert. Das innere Element enthält lediglich den Inhalt.

.demo-custom-scrollbar-all {
    height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    margin: 0 0 20px;

    scrollbar-width: thin;
    scrollbar-color: deeppink antiquewhite;
}

Werte für scrollbar-width

• auto – Standardbreite
• thin – schmale Scrollbar
• none – Scrollbar ausblenden (Scrollen bleibt möglich)

scrollbar-color

• 1. Farbe – Thumb (beweglicher Schieber)
• 2. Farbe – Track (Hintergrund)
• Alle CSS-Farbwerte sind erlaubt, auch transparent.
• Verläufe und Bilder werden nicht unterstützt.

Werte für scrollbar-gutter

Mit scrollbar-gutter kann Platz für eine Scrollbar reserviert werden. Dadurch bleibt das Layout stabil, wenn Scrollbars erscheinen oder verschwinden.

.container {
    overflow: auto;
    scrollbar-gutter: stable;
}

• auto – Standardverhalten des Browsers.
• stable – Reserviert Platz für die Scrollbar, um Layoutverschiebungen zu vermeiden.
• stable both-edges – Reserviert den Platz auf beiden Seiten für eine symmetrische Darstellung.
• always – Reserviert den Platz dauerhaft (experimentell, noch nicht breit unterstützt).

Hinweis: Je nach Browser und Betriebssystem ist der Effekt nicht immer sichtbar. Beispielsweise verwenden macOS und einige Browser Overlay-Scrollbars, die keinen zusätzlichen Platz benötigen.

---

Custom Scrollbars – WebKit

Chromium-basierte Browser und Safari unterstützen mit ::-webkit-scrollbar zusätzliche Gestaltungsmöglichkeiten wie individuelle Breiten, Verläufe, Hover-Effekte oder abgerundete Ecken.

.element::-webkit-scrollbar {
    width: 10px;
}

.element::-webkit-scrollbar-track {
    background: antiquewhite;
    border-radius: 5px;
}

.element::-webkit-scrollbar-thumb {
    background:linear-gradient(to bottom, deeppink, indigo);
    border-radius: 5px;
}

.element::-webkit-scrollbar-thumb:hover {
    background: deeppink;
}

---

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 overflow nur wirkt, wenn das Element eine definierte Grösse hat.

---

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.
• overflow-x und overflow-y können unabhängig voneinander verwendet werden.
• Scrollbars lassen sich mit scrollbar-width, scrollbar-color, scrollbar-gutter oder ::-webkit-scrollbar gestalten.

---

Für Boxgrössen und Layoutverhalten siehe Box Model und Display.

---