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 Verhalten bei übergroßen Inhalten in Elementen](typo3temp/fl_realurl_image/verhalten-bei-uebergrossen-inhalten-in-elementen-66.jpg)
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 CSS-Code für overflow-x](typo3temp/fl_realurl_image/css-code-fuer-overflow-x-be.jpg)
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 overflow-x auto und overflow-y nicht gesetzt](typo3temp/fl_realurl_image/overflow-x-auto-und-overflow-y-nicht-gesetzt-04.jpg)
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 overflow-x scroll und overflow-y nicht gesetzt](typo3temp/fl_realurl_image/overflow-x-scroll-und-overflow-y-nicht-gesetzt-ca.jpg)
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 overflow-x hidden und overflow-y nicht gesetzt](typo3temp/fl_realurl_image/overflow-x-hidden-und-overflow-y-nicht-gesetzt-92.jpg)
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 overflow-x visible und overflow-y nicht gesetzt](typo3temp/fl_realurl_image/overflow-x-visible-und-overflow-y-nicht-gesetzt-d1.jpg)
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.