Lädt...

CSS Overflow

Sie können einer Box eine feste Größe geben. Was, wenn der Inhalt höher oder breiter ist als diese Box? overflow entscheidet, ob der Überschuss hinausläuft, abgeschnitten wird oder scrollbar wird.

Schlüsselwörter auf einen Blick

📊 Häufige Overflow-Werte

Wert Alltagssinn
visible (Standard) Überschüssiger Inhalt kann aus der Box herauslaufen
hidden Überschuss wird abgeschnitten; keine Scrollleisten
scroll Scrollleisten werden gezeigt (oft auch wenn nicht nötig)
auto Scrollleisten erscheinen nur bei Overflow

Standard: Inhalt kann überlaufen

Mit overflow: visible (Standard) kann langer Inhalt außerhalb der Boxkanten gezeichnet werden.

Sichtbarer Overflow (Standard)

css
CSS Code 
.box-visible {
width: 220px;
height: 80px;
overflow: visible;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}

Mit hidden abschneiden

overflow: hidden schneidet alles ab, was nicht passt. Gut für saubere Kanten — aber Nutzer können den Rest nicht scrollen.

Hidden schneidet den Überlauf

css
CSS Code 
.box-hidden {
width: 220px;
height: 80px;
overflow: hidden;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}

Mit scroll immer Scrollleisten

overflow: scroll macht die Box scrollbar und reserviert oft Leistenplatz, auch wenn der Inhalt passt.

Immer scrollen

css
CSS Code 
.box-scroll {
width: 220px;
height: 80px;
overflow: scroll;
border: 1px solid #7c3aed;
background-color: #f5f3ff;
}

Auto — scrollen nur bei Bedarf

overflow: auto ist eine ruhige Alltagswahl für Panels: Leisten erscheinen bei Overflow und bleiben oft weg, wenn nichts überläuft.

Auto bei Bedarf

css
CSS Code 
.box-auto {
width: 220px;
height: 80px;
overflow: auto;
border: 1px solid #b45309;
background-color: #fffbeb;
}

Eine Achse steuern

Nutzen Sie overflow-x und overflow-y, wenn horizontales und vertikales Verhalten sich unterscheiden sollen — z. B. vertikal scrollen, seitlichen Überlauf clippen.

Vertikal scrollen, horizontal clippen

css
CSS Code 
.panel-axes {
width: 240px;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #334155;
background-color: #f1f5f9;
}

Praktische Panel-Gewohnheit

Geben Sie der Box eine echte Höhe (oder max-height), dann wählen Sie auto für lesbare, scrollbar Bereiche.

Scrollbar Notiz-Panel

css
CSS Code 
.note-panel {
width: 100%;
max-height: 160px;
overflow: auto;
padding: 1rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
box-sizing: border-box;
}

Selbst ausprobieren

  1. Bauen Sie eine Box mit width und kurzer height, fügen Sie mehrere Absätze ein.
  2. Wechseln Sie overflow zwischen visible, hidden, scroll und auto.
  3. Setzen Sie overflow-x: hidden und overflow-y: auto auf eine breite Textzeile.
  4. Bauen Sie .note-panel mit max-height und sehen Sie Leisten nur bei Bedarf.
  5. Ohne Höhenlimit (oder max-height) hat Overflow oft nichts zu begrenzen.

Häufige Fehler

  • Overflow-Effekte ohne begrenzte Höhe oder Breite erwarten
  • Überall scroll nutzen, obwohl auto ruhiger wäre
  • Overflow (Box-Überlauf) mit text-overflow verwechseln (Ellipsis am Text — späteres Werkzeug)
  • Mit hidden clippen und vergessen, dass Nutzer den Rest erreichen müssen
  • Annehmen, Overflow ändere die box-sizing-Rechnung (tut es nicht)

Kurzfassung

  • Overflow steuert Überlauf, Clip und Scroll, wenn Inhalt größer als die Box ist
  • Standard ist visible; hidden clippt; scroll zeigt oft immer Leisten; auto bei Bedarf
  • Eine begrenzte Größe (height / max-height / width) ist meist nötig, um den Effekt zu sehen
  • overflow-x und overflow-y trennen die Achsen
  • Für viele Panels ist overflow: auto eine ruhige Gewohnheit

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
7
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Css Tutorial