CSS overflow-x - Verhalten bei horizontal hinausragenden Inhalten

In CSS kann mit der Eigenschaft overflow-x das Verhalten für die Inhalte festgelegt werden, die horizontal über die Breite des Elements hinausragen. Das wären auf der folgenden Abbildung die Situationen mit der Nr. 3 und 4. Allerdings ist overflow-x nicht alleine zu betrachten, sondern mit overflow-y zusammen, da die Einstellungen sich gegenseitig beeinflussen.

Verhalten bei übergroßen Inhalten in Elementen

Werte für die Eigenschaft overflow-x

Für die Eigenschaft overflow-x kann man die folgenden Werte verwenden.

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)

Auf der folgenden Abbildung ist die Syntax mit einem Beispiel abgebildet.

Die Eigenschaft overflow-x beeinflusst die Eigenschaft overflow-y, mit dem das Verhalten bei übergroßen Inhalte in vertikaler Richtung festgelegt wird. Nachfolgend ist die Erläuterung des Verhaltens, wenn overflow-x gesetzt ist, overflow-y dagegen nicht. Auf der Seite overflow-x und overflow-y wird das Verhalten erläutert, wenn beide Eigenschaften gesetzt werden. Bei einigen Browsern kann das Verhalten etwas abweichend sein.

Wenn overflow-x: auto; und overflow-y 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-x: auto gesetzt ist, das Verhalten bei vertikal übergroßen Inhalten dem Wert von overflow-y: auto; entspricht, auch wenn der Wert für overflow-y nicht angegeben wurde.

overflow-x auto und overflow-y nicht gesetzt

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

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

Wenn overflow-x: hidden; und overflow-y 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, die aktiv sind.
Ist der Inhalt nur horizontal unpassend, wird der hinausragende Teil versteckt.
Ist der Inhalt horizontal und vertikal unpassend, werden vertikale Scrollleisten eingeblendet. Der horizontal hinausragende Teil des Inhalts wird versteckt.

Wenn overflow-x: visible; und overflow-y 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 hinaus.
Ist der Inhalt horizontal und vertikal unpassend, ragen die Inhalte vertikal und horizontal hinaus.

Zusammenfassend kann man sagen, dass wenn overflow-x gesetzt und overflow-y nicht gesetzt wurde, der Wert für overflow-y immer auf auto gesetzt wird, außer wenn für overflow-x der Wert visible gewählt wurde.