overflow: hidden vs auto vs scroll – was mit überlaufendem Inhalt passiert

Die vier Werte

visible: Inhalt ragt über die Box hinaus und überlappt Nachbarn – der Ausgangswert. hidden: alles außerhalb wird abgeschnitten, ohne Scrollmöglichkeit. auto: Scrollleisten erscheinen nur, wenn Inhalt überläuft. scroll: Scrollleisten immer, auch ohne Überlauf. overflow-x und overflow-y steuern die Achsen getrennt; overflow: hidden auto ist die Kurzform.

Nebenwirkungen von hidden und auto

Jeder Wert außer visible macht die Box zu einem eigenen Formatierungskontext. Sie schließt Floats ein (der alte Clearfix-Ersatz), ihre Außenabstände fallen nicht mehr mit denen der Kinder zusammen, und position: sticky in einem Kind hört auf zu funktionieren, weil der Scroll-Container jetzt die Box ist statt das Fenster. hidden schneidet außerdem Fokusringe und Schatten ab, die über den Rand ragen.

Tabellen und Code auf schmalen Bildschirmen

Eine breite Tabelle oder ein Codeblock sprengt auf dem Handy die Seite und erzeugt einen waagerechten Scrollbalken am Dokument – die Interaktion, die niemand findet. Ein Wrapper mit overflow-x: auto hält den Scrollbalken beim Element. So sind die Codebeispiele und Tabellen dieser Referenz gebaut.

Die getrennten Achsen und ihre Kopplung

Die Kurzform setzt beide Achsen; mit overflow-x und overflow-y lassen sie sich getrennt angeben. Dabei gilt eine Regel, die überrascht: Sobald eine der beiden Achsen einen anderen Wert als visible trägt, wird auch die andere so behandelt, als stünde dort auto. Die Kombination aus sichtbarem Überlauf in der einen und abgeschnittenem in der anderen Richtung ist also nicht darstellbar.

Das ist kein Fehler der Browser, sondern in der Spezifikation so festgelegt, und der Grund ist einleuchtend: Ein Rollbereich braucht eine Kante, an der er rollt, und die kann nicht auf einer Achse offen sein. Wer eine waagerecht rollende Reihe baut, deren Inhalt oben herausragen darf – Karten mit einer aufgesetzten Marke –, stößt genau hier an. Der übliche Ausweg ist Innenabstand am Rollbereich, damit der überstehende Teil innerhalb der Box liegt, statt aus ihr herauszuragen.

Rollbereiche und die Tastatur

Ein Bereich, der rollt, muss auch ohne Maus rollbar sein. Die Browser haben das lange unterschiedlich gehandhabt; inzwischen bekommt ein Rollbereich in den meisten von ihnen den Fokus, sofern er keinen fokussierbaren Inhalt enthält, und lässt sich dann mit den Pfeiltasten bewegen. Verlassen kann man sich darauf nicht. Ein Bereich, in dem etwas Wichtiges steht – eine breite Tabelle, ein langer Codeblock –, bekommt deshalb besser ausdrücklich eine Position in der Tabulatorreihenfolge und eine Beschriftung, damit die Sprachausgabe ihn ankündigt.

Zum Aussehen der Rollbalken sagt CSS 2.1 nichts; das war lange Sache des Betriebssystems. Auf berührungsempfindlichen Geräten erscheinen sie ohnehin nur während des Rollens, weshalb scroll dort und auto dort praktisch gleich aussehen und der Unterschied im Platzbedarf entfällt. Für die Gestaltung gibt es heute eigene Eigenschaften, aber ein unsichtbar gemachter Rollbalken nimmt einem Teil der Leser den einzigen Hinweis darauf, dass es überhaupt weitergeht.

Was ein Abschneiden sonst noch bewirkt

Ein Wert außer visible hat eine Nebenwirkung, die mit dem Überlauf nichts zu tun hat: Das Element erzeugt einen eigenen Block-Formatierungskontext. Daraus folgt dreierlei. Der Kasten umschließt die umflossenen Elemente darin, statt zusammenzufallen – die älteste Art, das Problem des zu kurzen Containers zu lösen. Außenabstände von Kindern fallen nicht mehr durch die Kante des Kastens hindurch. Und der Kasten selbst weicht einem benachbarten Float aus, statt unter ihn zu laufen.

Wer overflow: hidden also nur setzt, weil etwas herausragt, ändert unter Umständen mehr, als er beabsichtigt. Umgekehrt findet sich die Deklaration in altem Code oft an Stellen, an denen gar nichts überläuft – dort ist sie kein Versehen, sondern genau wegen dieser Nebenwirkung gesetzt. Seit es einen eigenen Wert für den Formatierungskontext gibt, lässt sich beides sauber trennen, und ein Kommentar an der alten Deklaration erspart dem Nachfolger die Frage, welche der beiden Wirkungen gemeint war.

Was der Überlauf mit dem Rundungsradius macht

Ein abgeschnittener Überlauf folgt der Rundung der Box, nicht ihrem rechteckigen Umriss. Deshalb ist overflow: hidden die gebräuchliche Art, ein Bild in eine abgerundete Karte einzupassen, ohne das Bild selbst abzurunden. Für den reinen Zweck des Beschneidens gibt es inzwischen einen eigenen Wert, der abschneidet, ohne einen Rollbereich zu erzeugen – und damit ohne die Nebenwirkungen des vorigen Abschnitts.

Wann welches

• Breite Tabellen, Code, Diagramme: Wrapper mit overflow-x: auto.
• Abschneiden für Effekte, Bildausschnitte, Karussells: hidden – mit Blick auf Fokusringe.
• Immer sichtbare Leiste, damit das Layout nicht springt: scroll, oder scrollbar-gutter: stable.
• Floats einschließen: display: flow-root statt overflow: hidden.

Häufige Fragen