CSS Academy · Lektion

Overflow: Scroll, Clip und Auto

Steuern Sie mit overflow-Eigenschaften, was geschieht, wenn Inhalte ihren Container überschreiten.

Overflow: Scroll, Clip und Auto ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Was ist Overflow?

Overflow tritt auf, wenn der Inhalt eines Elements größer als seine festgelegten Abmessungen ist. Die Eigenschaft overflow steuert, was mit diesem überschüssigen Inhalt geschieht.

overflow: visible (Standard)

Standardmäßig läuft Inhalt über und bleibt außerhalb der Box des Elements sichtbar. Dadurch können sich Inhalte mit Geschwisterelementen überlagern oder aus dem Viewport herausragen.

<div class="box">This text is long enough to spill outside the box edges visibly.</div>

overflow: hidden

overflow: hidden schneidet alle Inhalte ab, die über die Grenzen des Elements hinausragen. Die abgeschnittenen Inhalte sind nicht zugänglich und können nicht gescrollt werden.

<div class="cropped">This long text gets clipped by the rounded box edges instead of spilling out.</div>

overflow: scroll

overflow: scroll zeigt immer Scrollleisten an — auch wenn der Inhalt vollständig hineinpasst. Verwenden Sie dies, wenn die Benutzeroberfläche unabhängig von der Inhaltsgröße einheitlich bleiben soll.

<pre class="code-block">line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10</pre>

overflow: auto

overflow: auto zeigt Scrollleisten nur an, wenn der Inhalt tatsächlich überläuft. Dies wird normalerweise gegenüber scroll bevorzugt, um unnötige Bereiche für Scrollleisten zu vermeiden.

<div class="sidebar"><p>Paragraph one.</p><p>Paragraph two.</p><p>Paragraph three.</p><p>Paragraph four.</p><p>Paragraph five.</p><p>Paragraph six.</p></div>

overflow: clip

overflow: clip ähnelt hidden, ist aber strenger: Es erzeugt keinen Block-Formatierungskontext und kann nicht per JavaScript gescrollt werden. Das ist ideal für Clipping mit sicherer Performance.

<div class="clipped">This long text will be clipped at the box edge with no scrollbar, unlike overflow hidden which still allows programmatic scrolling.</div>

overflow-x und overflow-y

Steuern Sie jede Achse unabhängig. Ein häufig verwendetes Muster ermöglicht horizontales Scrollen für breite Inhalte wie Code oder Tabellen:

<div class="table-container"><table><tr><td>Col A</td><td>Col B</td><td>Col C</td><td>Col D</td><td>Col E</td><td>Col F</td></tr></table></div>

Muster für scrollbare Container

Um einen scrollbaren Container zu erstellen, benötigen Sie sowohl eine feste Höhe als auch overflow: auto oder scroll:

<div class="chat-messages"><p>Hey!</p><p>How's it going?</p><p>Working on the CSS course.</p><p>Nice, how far are you?</p><p>Almost done with overflow.</p><p>Let's grab lunch after.</p></div>

Block-Formatierungskontext durch overflow

Das Setzen von overflow auf einen beliebigen Wert außer visible erstellt einen Block-Formatierungskontext (BFC). Dieser kapselt interne Floats und verhindert, dass das Kollabieren von Margins aus dem Container herauswirkt.

Scroll Chaining

Wenn ein scrollbarer Container bis an seine Grenze gescrollt wurde, können Scroll-Ereignisse an das übergeordnete Element weitergereicht werden. Verwenden Sie overscroll-behavior: contain, um dies zu verhindern.

<div class="modal-body"><p>Modal content line 1</p><p>Modal content line 2</p><p>Modal content line 3</p><p>Modal content line 4</p><p>Modal content line 5</p><p>Modal content line 6</p></div>

text-overflow im Vergleich zu overflow

text-overflow: ellipsis bezieht sich auf den Text innerhalb eines Elements und benötigt overflow: hidden + white-space: nowrap, um zu funktionieren. overflow steuert das Überlaufverhalten des Elements selbst.

Kurzer Check

Welcher overflow-Wert zeigt Bildlaufleisten nur dann an, wenn der Inhalt tatsächlich überläuft?

Zusammenfassung

overflow: hidden schneidet Inhalte ab. overflow: auto fügt Bildlaufleisten nur bei Bedarf hinzu (empfohlen). overflow: scroll zeigt Bildlaufleisten immer an. overflow: clip schneidet Inhalte ab, ohne einen neuen Formatierungskontext zu erstellen. Verwenden Sie overflow-x/y zur achsenspezifischen Steuerung.

Häufig gestellte Fragen

Ist die Lektion „Overflow: Scroll, Clip und Auto“ kostenlos?

Ja — der vollständige Text von „Overflow: Scroll, Clip und Auto“ 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: Scroll, Clip und Auto“?

Steuern Sie mit overflow-Eigenschaften, was geschieht, wenn Inhalte ihren Container überschreiten. 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 3 von 4.

Wie lange dauert die Lektion „Overflow: Scroll, Clip und Auto“?

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

← Zurück zu CSS Academy