Verhalten, wenn overflow-x und overflow-y gesetzt wurden

Wenn bei beiden Eigenschaften der Wert auf auto gesetzt wurde, ist im Grunde nichts besonderes zu beachten. Der Wert sorgt dafür, dass automatisch vertikale und/oder horizontale Scrollleisten eingeblendet werden, wenn es notwendig ist bzw. wenn die Inhalte vertikal und/oder horizontal aus dem Element hinausragen.

Wenn diese Werte gesetzt sind, werden horizontale Scrollleisten immer eingeblendet. Diese sind jedoch nur dann aktiv, wenn der Inhalt horizontal aus dem Element hinausragt. Vertikale Scrollleisten werden nur dann automatisch eingeblendet, wenn es erforderlich ist bzw. die Inhalte vertikal aus dem Element hinausragen.

Sind diese Werte gesetzt, werden horizontal hinausragende Inhalte versteckt bzw. abgeschnitten. Bei vertikal hinausragenden Inhalten werden automatisch Scrollleisten eingeblendet.

Bei diesen Werten verhält es sich anders, als man es vielleicht annehmen würde. Obwohl bei overflow-x der Wert auf visible gesetzt wurde, werden bei horizontal hinausragenden Inhalten automatisch Scrollleisten eingeblendet, was dem Wert von auto entspricht. Das ist gemäß den CSS-Spezifikationen das richtige Verhalten, da der Wert von visible auf auto umgestellt werden soll, wenn den Eigenschaften die Werte visible und auto vergeben wurden.

Bei diesen beiden Werten werden vertikal hinausragende Inhalte versteckt. Bei horizontal hinausragenden Inhalten werden an den Elementen automatisch Scrollleisten eingeblendet.

Falls diese Werte gesetzt sind, werden vertikal hinausragende Inhalte versteckt und es werden immer horizontale Scrollleisten eingeblendet. Diese sind jedoch nur bei Bedarf aktiv bzw. wenn der Inhalt breiter ist als der Container.

Sind beide Werte auf hidden gesetzt, spielt es keine Rolle, ob die Inhalte vertikal oder horizontal hinausragen und werden immer versteckt und es werden keine Scrollleisten angezeigt.

Bei diesen beiden Werten werden vertikal hinausragende Inhalte versteckt. Bei horizontal hinausragenden Inhalten werden automatisch Scrollleisten eingeblendet.

Mit diesen Werten werden immer vertikale Scrollleisten eingeblendet. Sie sind jedoch nur dann aktiv, wenn die Situation es erfordert. Horizontale Scrollleisten werden automatisch eingeblendet, wenn die Inhalte breiter sind als der Container.

Es werden immer Scrollleisten eingeblendet, die bei Bedarf aktiviert werden, wenn beide Werte auf scroll gesetzt sind.

Diese Werte sorgen dafür, dass die vertikalen Scrollleisten eingeblendet und bei Bedarf aktiviert werden. Bei horizontal übergroßen Inhalten werden die hinausragenden Teile versteckt.

Auch bei diesen Werten verhält es sich anders, als man es eigentlich angegeben hat. Die vertikalen Scrollleisten werden immer eingeblendet und bei Bedarf aktiviert. Bei horizontal übergroßen Inhalten werden jedoch ebenfalls Scrollleisten eingeblendet.

Bei diesen Werten ist wieder zu berücksichtigen, dass der Wert für overflow-y von visible auf auto umgestellt wird, da der Wert von overflow-x auf auto gesetzt ist. Somit werden in beide Richtungen bei Bedarf Scrollleisten eingeblendet.

Diese Werte sorgen dafür, dass horizontal immer Scrollleisten angezeigt und bei Bedarf aktiviert werden. Vertikal werden bei Bedarf Scrollleisten eingeblendet, obwohl man eigentlich bei overflow-y angibt, dass die Inhalte angezeigt werden sollen.

Horizontal hinausragende Inhalte werden mit diesen Werten immer versteckt und bei vertikal hinausragenden Inhalten werden automatisch Scrollleisten eingeblendet.

Werden beide Werte auf visible gesetzt, entspricht das dem Standardverhalten und die Inhalte ragen hinaus.