overflow: hidden, scroll, auto, clip
Steuern Sie mit den Werten hidden, scroll, auto und clip, wie überlaufende Inhalte behandelt werden.
overflow: hidden, scroll, auto, clip ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Zusammenfassung der overflow-Eigenschaft
overflow legt fest, was geschieht, wenn der Inhalt eines Elements seine definierten Abmessungen überschreitet. Die Eigenschaft gilt gleichzeitig für beide Achsen (oder Sie verwenden overflow-x/overflow-y für eine getrennte Steuerung der Achsen).
overflow: visible
visible (Standard) – der Inhalt wird außerhalb der Box dargestellt. Dadurch wird kein Block Formatting Context (BFC) erzeugt. Andere Elemente können den überlaufenden Inhalt überlagern.
overflow: hidden
hidden schneidet den Inhalt an der Begrenzung der Box ab. Dadurch wird ein BFC erzeugt, der Floats einschließt und das Zusammenfallen von Außenabständen verhindert. Dies ist der häufigste Wert für Bildcontainer mit abgerundeten Ecken.
<div class="rounded-card"></div>overflow: scroll
scroll zeigt immer Scrollbars an (auf Achsen, die diese unterstützen), unabhängig davon, ob der Inhalt überläuft. Das ist nützlich für eine konsistente Benutzeroberfläche, in der der Platz für Scrollbars immer vorhanden sein soll, um Layoutverschiebungen zu verhindern.
<div class="console">line 1<br>line 2<br>line 3<br>line 4<br>line 5<br>line 6<br>line 7<br>line 8<br>line 9<br>line 10<br>line 11<br>line 12</div>overflow: auto
auto zeigt Scrollbars nur an, wenn der Inhalt tatsächlich überläuft. Für die meisten scrollbaren Container ist dieser Wert scroll vorzuziehen, da das unnötige Rendern von Scrollbars vermieden wird.
<div class="sidebar">Sidebar content line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5</div>overflow: clip
clip schneidet den Inhalt wie hidden ab, erzeugt aber KEINEN BFC. Das bedeutet, dass die Eigenschaft weder das Einschließen von Floats noch das Zusammenfallen von Außenabständen beeinflusst. Verwenden Sie sie, wenn Sie den Inhalt abschneiden möchten, ohne die Nebenwirkungen eines BFC.
<div class="decorative-overflow"><div class="deco"></div></div>overflow-x und overflow-y
Steuern Sie jede Achse unabhängig. Ein sehr häufiges Muster ist ein horizontaler Bildlauf für breite Inhalte (Tabellen, Code), während der vertikale Überlauf sichtbar bleibt:
<div class="table-wrapper">
<table>
<tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</div>Overflow und BFC
Das Setzen von overflow auf einen beliebigen Wert außer visible und clip erzeugt einen Block Formatting Context. Dieser schließt interne Floats ein, verhindert das Durchsickern zusammenfallender Außenabstände und richtet einen neuen Scrollkontext ein.
overflow: overlay (nicht standardisiert)
overflow: overlay zeichnet die Scrollbar über dem Inhalt, statt Layoutplatz dafür zu belegen. Dieser Wert war in einigen Browsern nicht standardisiert und wird zugunsten moderner Scrollbar-Gestaltungsmethoden abgeschafft.
scrollbar-gutter
Die neue Eigenschaft scrollbar-gutter: stable reserviert Platz für die Scrollbar, auch wenn sie nicht benötigt wird. Dadurch werden Layoutverschiebungen verhindert, wenn der Inhalt scrollbar wird.
<div class="container">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7</div>Overflow und positionierte Fixed-Kinder
Ein häufiger Fehler: Ein Kind mit position: fixed innerhalb eines Elements mit overflow: hidden verhält sich wie position: absolute – die Fixed-Position ist relativ zum umgebenden Block, und der Overflow erzeugt einen neuen Stacking Context.
Kurzer Test
Welcher overflow-Wert schneidet den Inhalt ab, ohne einen Block Formatting Context zu erzeugen?
Zusammenfassung
visible (Standard) erlaubt Überlauf. hidden schneidet den Inhalt ab und erzeugt einen BFC. scroll zeigt immer Scrollbars an. auto zeigt Scrollbars nur bei Bedarf an (empfohlen). clip schneidet den Inhalt ohne BFC ab. Verwenden Sie overflow-x/y für eine achsenweise Steuerung. Verwenden Sie scrollbar-gutter: stable, um Layoutverschiebungen zu verhindern.
Häufig gestellte Fragen
Ist die Lektion „overflow: hidden, scroll, auto, clip“ kostenlos?
Ja — der vollständige Text von „overflow: hidden, scroll, auto, clip“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „overflow: hidden, scroll, auto, clip“?
Steuern Sie mit den Werten hidden, scroll, auto und clip, wie überlaufende Inhalte behandelt werden. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „overflow: hidden, scroll, auto, clip“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- overflow: hidden, scroll, auto, clip
- scroll-behavior: smooth
- scroll-snap-type und scroll-snap-align
- Scrollbar-Styling mit ::-webkit-scrollbar