Overflow

Zu wenig Platz in der Box

Die CSS-Eigenschaft overflow bestimmt, was passieren soll, wenn der Inhalt einer Box keinen Platz hat. Die Theorie dieser Seite hilft dir, die nächste Seite "Ausgabe auf Smartphones" zu verstehen.

Eine Box mit fixem (und zu breitem Inhalt) kann bei der Ausgabe auf schmalen Geräten die Breite des Viewports zerstören, was unliebsame Folgen für die "User Experience" haben kann. Es lohnt sich also, sich mit dem Thema zu beschäftigen.

Was heisst `overflow`?

overflow könnte man mit "Überlauf, überlaufen, überquellen" übersetzen. Mit der CSS-Eigenschaft overflow kann man sehr genau definieren, was mit dem Inhalt passieren soll, wenn er zu gross für eine Box ist.

Die vier wichtigsten Werte

visible = Die Box wird wie ein Gummi-Ballon ausgeweitet, der Inhalt ist immer komplett sichtbar (Standard-Wert). Das ist voll o.k., wenn du z.B. kein genaues Design für eine Box mit Text haben möchtest und die Höhe nicht definierst.
hidden = Der Inhalt wird abgeschnitten, wenn er die vorgegebenen Dimensionen der Box überschreitet. Der Overflow ist unsichtbar (die schlechteste Wahl).
scroll = Der Inhalt wird abgeschnitten, wenn er die die vorgegebenen Dimensionen der Box überschreitet. Der Browser zeigt Scrollbars an, diese sind jedoch immer sichtbar (also auch wenn es eigentlich genug Platz hätte).
auto = Der Browser berechnet selber, ob es nötig ist, Scrollbars anzuzeigen oder nicht (meistens die beste Wahl).

🤔 Der deutsche Begriff für Scrollbar ist "Rollbalken", das versteht aber praktisch niemand.

Noch genauer?

Falls das noch nicht ausreicht, kann man das Scroll-Verhalten auch auf die x- und der y-Achse beschränken: overflow-x und overflow-y.

Reif für die Insel? Ein Beispiel

Das Insel-Bild unten mit fixer Breite hat keinen Platz in der Box. Der Browser entscheidet, dass Scrollbars angezeigt werden.

HTML-Code

<div id="myBox">
	<img style="width: 700px; height: auto;" src="malediven.jpg" >
</div>

CSS-Code

#myBox {
	max-width: 600px;
	height: 240px;
	overflow: auto;
}

Vorschau (formatiert)

Bei "mdm web docs" findest du mehr Infos zu diesem Thema: "overflow".

Das Torpedo auf die Scrollbars

Je nach dem, auf welchem Gerät (Tablet?) und in welchem Browser du unterwegs bist, kannst du keine Scrollbars sehen, auch wenn du alle CSS-Theorie verstanden und die Regeln für overflow richtig programmiert hast. Der Grund dafür kann sein, dass der Browser deinem Code "in den Rücken schiesst" und die Scrollbars ausblendet, wenn man in der Box gerade nichts mehr manipuliert.