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.

CSS-Code für overflow-x

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.
overflow-x scroll und overflow-y nicht gesetzt

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.
overflow-x hidden und overflow-y nicht gesetzt

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.
overflow-x visible und overflow-y nicht gesetzt

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.