CSS overflow-y - Verhalten bei vertikal hinausragenden Inhalten

Wenn auf Websites bei den Elementen eine Beschränkung in der Höhe vorliegt, die Inhalte jedoch höher sind, dann ragen sie standardmäßig vertikal nach unten aus dem Element hinaus. Das wären auf der folgenden Abbildung die Situationen mit der Nummer 2 und 4. Mit der Eigenschaft overflow-y kann man festlegen, wie der Browser in solchen Situationen verfahren soll. Dabei sollte man overflow-y jedoch nicht alleine betrachten, da es auch einen gewissen Zusammenhang mit overflow-x gibt, mit dem das Verhalten bei horizontal übergroßen Inhalten festgelegt wird.

Standardverhalten wenn Inhalte zu groß sind

Werte für die Eigenschaft overflow-y

Für die Eigenschaft overflow-y können die folgenden Werte angegeben werden.

visible (Standardverhalten, Inhalte werden angezeigt)
auto (Scrollbars werden nur angezeigt, wenn es notwendig ist)
scroll (Scrollbars werden immer angezeigt, sind jedoch erst aktiv, wenn es notwendig ist)
hidden (Hinausragende Inhalte werden versteckt bzw. abgeschnitten)
initial (Setzt auf den Standardwert)
inherit (Vererbt vom Elternelement)

Nachfolgend ist mit einem Beispiel die Syntax abgebildet.

Je nach gewähltem Wert wird mit der Eigenschaft overflow-y auch die Eigenschaft overflow-x beeinflusst und umgekehrt. Nachfolgend ist auf dieser Seite zunächst das Verhalten erläutert, wenn overflow-y gesetzt ist, overflow-x jedoch nicht. Auf der Seite overflow-x und overflow-y werden die Fälle erläutert, wenn beide Eigenschaften gesetzt sind. Das beschriebene Verhalten kann außerdem bei einigen Browsern davon abweichen, insbesondere bei älteren Browsern.

Wenn overflow-y: auto; und overflow-x nicht gesetzt ist

Ist der Inhalt innerhalb des Elements passend, erfolgt keine Veränderung.
Ist der Inhalt horizontal passend, vertikal jedoch nicht, werden vertikale Scrollleisten eingeblendet.
Ist der Inhalt nur horizontal unpassend, werden automatisch horizontale Scrollleisten eingeblendet.
Ist der Inhalt horizontal und vertikal unpassend, werden auf beiden Seiten Scrollleisten eingeblendet.

Daraus lässt sich ableiten, dass wenn overflow-y: auto gesetzt ist, das Verhalten bei vertikal übergroßen Inhalten dem Wert von overflow-x: auto; entspricht, auch wenn der Wert für overflow-x nicht angegeben wurde.

overflow-y auto und overflow-x nicht gesetzt

Wenn overflow-y: scroll; und overflow-x nicht gesetzt ist

Ist der Inhalt innerhalb des Elements passend, werden vertikale Scrollleisten eingeblendet, die jedoch inaktiv sind.
Ist der Inhalt horizontal passend, vertikal jedoch nicht, werden vertikale Scrollleisten eingeblendet, die aktiv sind.
Ist der Inhalt nur horizontal unpassend, werden automatisch horizontale Scrollleisten eingeblendet, die aktiv sind. Vertikale Scrollleisten sind ebenfalls vorhanden, die jedoch inaktiv sind.
Ist der Inhalt horizontal und vertikal unpassend, werden auf beiden Seiten Scrollleisten eingeblendet.

Wenn overflow-y: hidden; und overflow-x nicht gesetzt ist

Ist der Inhalt innerhalb des Elements passend, erfolgt keine Veränderung.
Ist der Inhalt horizontal passend, vertikal jedoch nicht, wird der hinausragende Teil versteckt.
Ist der Inhalt nur horizontal unpassend, werden horizontale Scrollleisten eingeblendet.
Ist der Inhalt horizontal und vertikal unpassend, werden trotzdem nur horizontale Scrollleisten eingeblendet.

Wenn overflow-y: visible; und overflow-x nicht gesetzt ist

Ist der Inhalt innerhalb des Elements passend, erfolgt keine Veränderung.
Ist der Inhalt horizontal passend, vertikal jedoch nicht, ragt der übergroße Teil vertikal hinaus.
Ist der Inhalt nur horizontal unpassend, ragt der übergroße Teil des Inhalts horizontal hinaus.
Ist der Inhalt horizontal und vertikal unpassend, ragen die Inhalte vertikal und horizontal hinaus.

Zusammenfassend kann man von dem beschriebenen Verhalten ableiten, dass wenn overflow-y gesetzt wurde, overflow-x jedoch nicht, der Wert für overflow-x immer auf auto gesetzt wird, außer wenn der Wert für overflow-y auf visible gesetzt wurde.