overflow

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

• overflow-x
• overflow-y

/* Keyword values */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
overflow: hidden visible;

/* Global values */
overflow: inherit;
overflow: initial;
overflow: revert;
overflow: revert-layer;
overflow: unset;

Die overflow-Eigenschaft wird als ein oder zwei <overflow> Schlüsselwort-Werte angegeben. Wenn nur ein Schlüsselwort angegeben ist, werden sowohl overflow-x als auch overflow-y auf denselben Wert gesetzt. Wenn zwei Schlüsselwörter angegeben sind, gilt der erste Wert für overflow-x in horizontaler Richtung und der zweite für overflow-y in vertikaler Richtung.

visible

Überlaufender Inhalt wird nicht abgeschnitten und kann außerhalb des Padding-Bereichs des Elements sichtbar sein. Das Element-Box ist kein Scroll-Container. Dies ist der Standardwert der overflow-Eigenschaft.

hidden

Überlaufender Inhalt wird an der Padding-Box des Elements abgeschnitten. Es gibt keine Scrollleisten und der abgeschnittene Inhalt ist nicht sichtbar (d.h. der Inhalt wird versteckt), aber der Inhalt existiert weiterhin. Benutzeragenten fügen keine Scrollleisten hinzu und erlauben den Benutzern auch nicht, den Inhalt außerhalb des abgeschnittenen Bereichs durch Aktionen wie Ziehen auf einem Touchscreen oder Verwenden des Scrollrads einer Maus zu betrachten. Der Inhalt kann programmgesteuert gescrollt werden (zum Beispiel durch Verlinken zu Ankertext, tabbing zu einem versteckten, aber fokussierbaren Element oder durch Setzen des Wertes der scrollLeft-Eigenschaft oder der scrollTo()-Methode), in diesem Fall ist die Element-Box ein Scroll-Container.

clip

Überlaufender Inhalt wird an der overflow clip edge des Elements abgeschnitten, die mit der overflow-clip-margin Eigenschaft definiert ist. Daraus ergibt sich, dass Inhalt die Padding-Box des Elements um den <length>-Wert von overflow-clip-margin oder um 0px, falls nicht gesetzt, überschreitet. Überlaufender Inhalt außerhalb des abgeschnittenen Bereichs ist nicht sichtbar, Benutzeragenten fügen keine Scrollleisten hinzu und programmgesteuertes Scrollen wird ebenfalls nicht unterstützt. Es wird kein neuer Formatierungs-Kontext erstellt. Um einen Formatierungskontext zu schaffen, verwenden Sie overflow: clip zusammen mit display: flow-root. Die Element-Box ist kein Scroll-Container.

scroll

Überlaufender Inhalt wird an der Padding-Box des Elements abgeschnitten, und überlaufender Inhalt kann mit Scrollleisten in den Ansichtsbereich gescrollt werden. Benutzeragenten zeigen Scrollleisten, unabhängig davon, ob Inhalt überläuft oder nicht, also in den horizontalen und vertikalen Richtungen, wenn der Wert für beide Richtungen gilt. Die Verwendung dieses Schlüsselworts kann daher verhindern, dass Scrollleisten erscheinen und verschwinden, wenn sich der Inhalt ändert. Drucker können jedoch weiterhin überlaufenden Inhalt drucken. Die Element-Box ist ein Scroll-Container.

auto

Überlaufender Inhalt wird an der Padding-Box des Elements abgeschnitten, und überlaufender Inhalt kann mit Scrollleisten in den Ansichtsbereich gescrollt werden. Im Gegensatz zu scroll zeigen Benutzeragenten Scrollleisten nur dann an, wenn Inhalt überläuft. Wenn der Inhalt in den Padding-Bereich des Elements passt, sieht es aus wie bei visible, stellt aber dennoch einen neuen Formatierungskontext her. Die Element-Box ist ein Scroll-Container.

Überlaufoptionen umfassen das Verstecken von überlaufendem Inhalt, das Aktivieren von Scrollleisten, um überlaufenden Inhalt anzuzeigen, oder das Anzeigen des Inhalts, der aus einer Element-Box in den umgebenden Bereich fließt, sowie deren Kombinationen.

Die folgenden Nuancen sollten bei der Verwendung der verschiedenen Schlüsselwörter für overflow beachtet werden:

• Die Angabe eines anderen Werts als visible (der Standard) oder clip für overflow erstellt einen neuen Blockformatierungskontext. Dies ist aus technischen Gründen notwendig; wenn ein Float ein scrollendes Element schneidet, würde es den Inhalt bei jedem Scroll-Schritt zwangsweise neu umbrechen, was zu einem langsamen Scroll-Erlebnis führen würde.
• Damit eine overflow-Einstellung die gewünschte Wirkung entfaltet, muss das Block-Element entweder eine festgelegte Höhe (height oder max-height) haben, wenn der Überlauf in vertikaler Richtung ist, eine festgelegte Breite (width oder max-width), wenn der Überlauf in horizontaler Richtung ist, eine festgelegte Blockgröße ((block-size oder max-block-size), wenn der Überlauf in Blockrichtung ist, oder eine festgelegte Inlinengröße ((inline-size oder max-inline-size) oder white-space auf nowrap gesetzt sein, wenn der Überlauf in Inlinerichtung ist.
• Wenn overflow in einer Richtung (d. h. overflow-x oder overflow-y) auf visible gesetzt wird, wenn es in der anderen Richtung nicht auf visible oder clip gesetzt ist, verhält sich der visible-Wert wie auto.
• Wenn overflow in einer Richtung auf clip gesetzt wird, wenn es in der anderen Richtung nicht auf visible oder clip gesetzt ist, verhält sich der clip-Wert wie hidden.
• Die JavaScript Element.scrollTop-Eigenschaft kann verwendet werden, um durch Inhalt in einem Scroll-Container zu scrollen, außer wenn overflow auf clip gesetzt ist.

overflow = 
  <'overflow-block'>{1,2}  

<overflow-block> = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto     

Ein scrollbarer Inhaltsbereich kann nicht von einem user, der ausschließlich die Tastatur verwendet, gescrollt werden, mit der Ausnahme von Benutzern auf Firefox (das macht den Container standardmäßig tastaturfokussierbar).

Als Entwickler sollten Sie, um Tastaturbenutzern, die nicht Firefox verwenden, zu ermöglichen, den Container zu scrollen, ihm ein tabindex mit tabindex="0" geben. Leider haben Screenreader bei der Begegnung mit dieser Tabulatortaste keinen Kontext dafür, was es ist, und ihr Screenreader wird wahrscheinlich den gesamten Inhalt ansagen. Um dies zu mildern, können Sie ihm eine geeignete WAI-ARIA-Rolle (role="region", zum Beispiel) und einen zugänglichen Namen (über aria-label oder aria-labelledby) geben.

HTML

<div>
  <code>visible</code>
  <p class="visible">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>hidden</code>
  <p class="hidden">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>clip</code>
  <p class="clip">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>scroll</code>
  <p class="scroll">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>auto</code>
  <p class="auto">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

<div>
  <code>overlay</code>
  <p class="overlay">
    Maya Angelou: "I've learned that people will forget what you said, people
    will forget what you did, but people will never forget how you made them
    feel."
  </p>
</div>

CSS

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

div {
  margin: 2em;
  font-size: 1.2em;
}

p {
  width: 5em;
  height: 5em;
  border: dotted;
  margin-top: 0.5em;
}

div:nth-of-type(5),
div:nth-of-type(6) {
  margin-top: 200px;
}

p.visible {
  overflow: visible;
}

p.hidden {
  overflow: hidden;
}

p.clip {
  overflow: clip;
  overflow-clip-margin: 1em;
}

p.scroll {
  overflow: scroll;
}

p.auto {
  overflow: auto;
}

p.overlay {
  overflow: overlay;
}

Ergebnis

• overflow-x, overflow-y
• overflow-block, overflow-clip-margin, overflow-inline
• clip, display, text-overflow, white-space
• SVG overflow Attribut
• CSS overflow Modul
• Tastatur-exklusive Scroll-Bereiche auf adrianroselli.com (2022)