Überlauf¶

Die overflow-Eigenschaft legt fest, ob Inhalte aus einem Element hinausragen dürfen, ob Scrollbalken beim Überlauf angezeigt werden oder ob der überlaufende Bereich nicht sichtbar sein soll.

Bemerkung

Überlauf bedeutet, dass der Inhaltsbereich größer ist als der sichtbare Bereich.

Werte für overflow¶

Eigenschaftswert	Erklärung
visible	Standardwert. Der Inhalt wird nicht abgeschnitten und kann aus dem Element hinausragen.
hidden	Der Inhalt wird abgeschnitten und es werden keine Scrollbalken angezeigt.
scroll	Es werden immer Scrollbalken angezeigt, auch wenn der Inhalt nicht überläuft.
auto	Scrollbalken werden angezeigt, wenn der Inhalt überläuft (browserabhängig).

.container {
  overflow: hidden;
}

.box {
  overflow: scroll;
}

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas asperiores eius aspernatur placeat officiis unde illum possimus accusantium minima nisi quo atque, perspiciatis consequatur libero reprehenderit voluptas suscipit dolore id?Fuga reprehenderit, iste aliquid omnis ratione nemo amet quos earum quam optio quo soluta voluptas doloribus illum et officiis enim tenetur ab quaerat nam itaque deserunt tempore nulla error! Magni.

overflow-x und overflow-y¶

Diese Eigenschaften steuern den Überlauf getrennt für die X- und Y-Achse.

Eigenschaft	Erklärung
overflow-x	Scrollbalken nur auf der horizontalen Achse.
overflow-y	Scrollbalken nur auf der vertikalen Achse.

.box {
  overflow-x: hidden;
  overflow-y: scroll;
}

Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt voluptatibus et, qui sit animi fugiat voluptate velit quasi quam earum reiciendis at vero natus minima corrupti sapiente est optio aliquam?Perferendis alias minus quos non iste iure quaerat veniam ipsum, ut ducimus itaque ratione, placeat nostrum molestias, tempore quod optio animi ex eaque! Distinctio beatae, voluptatum quo quisquam ut eligendi.