overflow

Diese Eigenschaft ist eine Kurzschreibweise 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üsselwortwerte angegeben. Wenn nur ein Schlüsselwort angegeben wird, setzen overflow-x und overflow-y denselben Wert. Wenn zwei Schlüsselwörter angegeben werden, wird der erste Wert auf overflow-x in der horizontalen Richtung angewendet und der zweite auf overflow-y in der vertikalen Richtung.

visible

Überlaufender Inhalt wird nicht abgeschnitten und kann außerhalb des Innenabstands (Padding-Box) des Elements sichtbar sein. Die Elementbox ist kein Scrollcontainer. Dies ist der Standardwert der overflow-Eigenschaft.

hidden

Überlaufender Inhalt wird an der Innenabstandskante des Elements abgeschnitten. Es gibt keine Scrollleisten, und der abgeschnittene Inhalt ist nicht sichtbar (d.h. der abgeschnittene Inhalt ist versteckt), aber der Inhalt existiert weiterhin. Web-Browser fügen keine Scrollleisten hinzu und erlauben es den Benutzern auch nicht, den Inhalt außerhalb des abgeschnittenen Bereichs durch Aktionen wie das Ziehen auf einem Touchscreen oder die Verwendung des Scrollrads einer Maus anzuzeigen. Der Inhalt kann jedoch programmgesteuert gescrollt werden (zum Beispiel durch Verlinkung zu einem Ankertext, durch Tabulatornavigieren zu einem versteckten, aber fokussierbaren Element oder durch Festlegen des Wertes der scrollLeft-Eigenschaft oder der scrollTo()-Methode), in welchem Fall die Elementbox ein Scrollcontainer ist.

clip

Überlaufender Inhalt wird an der Überlaufabschneidekante des Elements abgeschnitten, die mit der overflow-clip-margin-Eigenschaft definiert wird. Dadurch läuft der Inhalt bis zum <length>-Wert von overflow-clip-margin oder, falls nicht gesetzt, bis 0px über die Innenabstandskante hinaus. Überlaufender Inhalt außerhalb des abgeschnittenen Bereichs ist nicht sichtbar, Browser fügen keine Scrollleiste hinzu, und programmgesteuertes Scrollen wird ebenfalls nicht unterstützt. Es wird kein Formatierungskontext erstellt. Zum Erstellen eines Formatierungskontexts verwenden Sie overflow: clip zusammen mit display: flow-root. Die Elementbox ist kein Scrollcontainer.

scroll

Überlaufender Inhalt wird an der Innenabstandskante des Elements abgeschnitten, und überlaufender Inhalt kann mit Scrollleisten in den Sichtbereich gescrollt werden. Browser zeigen Scrollleisten an, unabhängig davon, ob Inhalte überlaufen oder nicht, sowohl in horizontaler als auch vertikaler Richtung, wenn der Wert auf beide Richtungen zutrifft. Die Verwendung dieses Schlüsselworts kann daher verhindern, dass Scrollleisten erscheinen und verschwinden, wenn sich Inhalte ändern. Drucker können trotzdem überlaufenden Inhalt drucken. Die Elementbox ist ein Scrollcontainer.

auto

Überlaufender Inhalt wird an der Innenabstandskante des Elements abgeschnitten, und überlaufender Inhalt kann mit Scrollleisten in den Sichtbereich gescrollt werden. Im Gegensatz zu scroll zeigen Browser Scrollleisten nur an, wenn der Inhalt überläuft. Wenn der Inhalt in den Innenabstand des Elements passt, sieht es aus wie visible, erstellt aber trotzdem einen neuen Formatierungskontext. Die Elementbox ist ein Scrollcontainer.

Überlaufoptionen umfassen das Ausblenden von Überlaufinhalten, das Aktivieren von Scrollleisten, um Überlaufinhalte anzuzeigen, oder das Anzeigen des Inhalts, der aus einer Elementbox in den umgebenden Bereich fließt, sowie deren Kombinationen.

Bei der Verwendung der verschiedenen Schlüsselwörter für overflow sollten folgende Nuancen beachtet werden:

• Das Festlegen eines anderen Wertes als visible (der Standard) oder clip für overflow erstellt einen neuen Blockformatierungskontext. Dies ist aus technischen Gründen erforderlich; wenn ein Float ein scrollendes Element schneidet, würde es dazu führen, dass der Inhalt bei jedem Scrollschritt neu umbrochen wird, was zu einem langsamen Scrollverhalten führt.
• Damit eine overflow-Einstellung die gewünschte Wirkung erzielt, muss das Blockelement entweder eine festgelegte Höhe (height oder max-height) haben, wenn der Überlauf in der vertikalen Richtung erfolgt, eine festgelegte Breite (width oder max-width) haben, wenn der Überlauf in der horizontalen Richtung erfolgt, eine festgelegte Blockgröße (block-size oder max-block-size) haben, wenn der Überlauf in der Blockrichtung erfolgt, oder eine festgelegte Inlinegröße (inline-size oder max-inline-size) oder white-space auf nowrap gesetzt sein, wenn der Überlauf in der Inlinerichtung erfolgt.
• Das Festlegen von overflow auf visible in einer Richtung (d.h. overflow-x oder overflow-y), wenn es nicht auf visible oder clip in der anderen Richtung gesetzt ist, führt dazu, dass der visible-Wert sich wie auto verhält.
• Das Festlegen von overflow auf clip in einer Richtung, wenn es nicht auf visible oder clip in der anderen Richtung gesetzt ist, führt dazu, dass der clip-Wert sich wie hidden verhält.
• Die JavaScript-Eigenschaft Element.scrollTop kann verwendet werden, um durch Inhalte in einem Scrollcontainer 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 ist nicht mit der Tastatur fokussierbar, sodass er von einem reinen Tastaturbenutzer nicht gescrollt werden kann. Firefox und Chrome 132 und später sind Ausnahmen; sie machen Scrollcontainer standardmäßig fokussierbar.

Für andere Browser müssen Sie, um reinen Tastaturbenutzern das Scrollen des Containers zu ermöglichen, dem Container ein tabindex zuweisen, indem Sie tabindex="0" verwenden. Leider hat ein Screenreader möglicherweise keinen Kontext, wenn er auf diesen Tabulatorstopp trifft, und könnte den gesamten Inhalt des Containers ankündigen. Um dies abzumildern, geben Sie dem Container eine passende WAI-ARIA-Rolle (z. B. role="region") und einen zugänglichen Namen (via aria-label oder aria-labelledby).

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
• Tastaturkurse für Scrollbereiche auf adrianroselli.com (2022)