overflow CSS-Eigenschaft

Probieren Sie es aus

overflow: visible;

overflow: hidden;

overflow: clip;

overflow: scroll;

overflow: auto;

<section class="default-example" id="default-example">
  <p id="example-element">
    Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's
    Inn Hall. Implacable November weather. As much mud in the streets as if the
    waters had but newly retired from the face of the earth.
  </p>
</section>

#example-element {
  width: 15em;
  height: 9em;
  border: medium dotted;
  padding: 0.75em;
  text-align: left;
}

Bestandteilseigenschaften

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

• overflow-x
• overflow-y

Syntax

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

/* Two-value syntax: horizontal | vertical */
overflow: hidden visible;

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

Werte

Diese Eigenschaft wird als ein oder zwei durch Leerzeichen getrennte <overflow>-Schlüsselwortwerte angegeben:

visible

Überlaufender Inhalt wird nicht abgeschnitten und kann außerhalb des Innenabstands des Elements sichtbar sein. Das Element ist keine scroll container. Dies ist der Standardwert.

hidden

Überlaufender Inhalt wird am Innenabstand des Elements abgeschnitten, der abgeschnittene Inhalt bleibt verborgen. Bei Überlauf ist das Element ein scroll container ohne Scrollleisten; das Scrollen ist dennoch über andere Methoden möglich, einschließlich des Tabben zu versteckten fokussierbaren Elementen, mit Eigenschaften wie der scrollLeft-Eigenschaft und mit Methoden wie scrollTo().

clip

Überlaufender Inhalt wird an der overflow clip edge des Elements abgeschnitten, die durch die overflow-clip-margin-Eigenschaft definiert wird. Das Element ist kein scroll container, der abgeschnittene Inhalt bleibt unsichtbar und programmgesteuertes Scrollen wird nicht unterstützt.

scroll

Überlaufender Inhalt wird am Innenabstand des Elements abgeschnitten. Unabhängig davon, ob er überläuft oder nicht, das Element ist immer ein scroll container mit sichtbaren Scrollleisten.

auto

Überlaufender Inhalt wird am Innenabstand des Elements abgeschnitten. Bei Überlauf ist das Element ein scroll container mit sichtbaren Scrollleisten.

Nicht-standardisierte Werte

Einige nicht-standardisierte Werte werden in manchen Browsern ebenfalls unterstützt:

overlay

Ein veraltetes Alias für auto, in der Spezifikation für die Web-Kompatibilität definiert. Ursprünglich als nicht-standardisierter Wert implementiert, um Scrollleisten über dem Inhalt zu rendern, anstatt Platz einzunehmen. Die Verwendung in neuem Code wird nicht empfohlen.

Beschreibung

Standardmäßig wachsen Blockelemente, um zu ihrem Inhalt zu passen. Ist die Größe eines Containers eingeschränkt, wird der Inhalt überlaufen. Die overflow-Eigenschaft bestimmt, wie ein Container mit überlaufendem Inhalt umgeht.

Die overflow-Eigenschaft ist eine Kurzschreibweise für die horizontale overflow-x- und vertikale overflow-y-Eigenschaften. 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, wird der erste Wert auf overflow-x in der horizontalen Richtung und der zweite auf overflow-y in der vertikalen Richtung angewendet.

Überlaufoptionen umfassen das Verbergen von überlaufendem Inhalt, das Aktivieren von Scrollleisten, um überlaufenden Inhalt anzuzeigen, oder das Anzeigen des Inhalts, der über den Rand eines Elemente-Kastens in den umliegenden Bereich hinausfließt, und Kombinationen davon.

Alle Werte, außer visible und clip, erstellen einen neuen Blockformatierungskontext. Der neue Blockformatierungskontext ist für scroll container notwendig, denn wenn ein Float mit einem scrollenden Element interagieren würde, würde der Inhalt nach jedem Scroll-Schritt zwangsweise neu umbrochen, was zu einem langsamen Scroll-Erlebnis führt.

Was Overflow erzeugt

Overflow tritt auf, wenn ein Blockelement Inhalt hat, der seinen beschränkten Raum überläuft. Der zur Verfügung gestellte Raum kann durch eine Höhe (height oder max-height) für vertikalen Overflow, eine Breite (width oder max-width) für horizontalen Overflow, eine Blockgröße (block-size oder max-block-size) für blockrichtungsüberlauf oder eine Inlinengröße (inline-size, max-inline-size, oder white-space auf nowrap gesetzt) für inlinerichtungsüberlauf eingeschränkt sein.

Der folgende CSS-Code begrenzt die Größe des Containers und definiert Box-Modell-Eigenschaftswerte, die die Größe des Containers einschränken. Eine Hintergrundfarbe, die auf den content-box zugeschnitten ist, wird ebenfalls hinzugefügt, um zu veranschaulichen, wie überfüllter Inhalt die Content-Box in den folgenden Erklärungen überläuft.

div {
  height: 10em;
  width: 15em;
  border: 3px solid;
  padding: 10px;

  background-color: #ededed;
  background-clip: content-box;
}

Verständnis der Overflow-Werte

Die verschiedenen overflow-Werte definieren, ob ein Element Scrollleisten hat, ob es benutzer- und programmgesteuert scrollbar ist und ob es ein scroll container ist (welcher einen neuen Blockformatierungskontext erstellt), wenn der Inhalt des Elements überläuft und im Fall von scroll sogar, wenn er es nicht tut.

Der visible-Wert

Der Standardwert ist visible. Standardmäßig ist der Inhalt, wenn er die Einschränkungen eines Containers überläuft, nicht auf den Container beschränkt. Ein Element, das standardmäßig oder explizit auf visible gesetzt ist, hat keine Scrollleisten, ist nicht benutzer- oder programmgesteuert scrollbar und ist kein scroll container. Dieser Wert erstellt keinen neuen Blockformatierungskontext.

div {
  overflow: visible;
}

<div>
  <h2>overflow: visible;</h2>
</div>
<div>
  <p>
    The <code>overflow</code> property in this example is set to
    <code>visible</code>. No scroll container is created; the content just
    overflows the container.
  </p>
</div>

Mit visible erfolgt kein Clipping, sodass der überlaufende Inhalt sichtbar außerhalb des Innenabstands des Elements ist und möglicherweise angrenzenden Inhalt überlappt.

Der scroll-Wert

Mit scroll wird der Inhalt am Innenabstand des Elements abgeschnitten und kann in den Sichtbereich gescrollt werden. Benutzeragenten zeigen Scrollleisten in beiden Richtungen an, unabhängig davon, ob Inhalt überläuft oder nicht, was verhindert, dass Scrollleisten als Reaktion auf Inhaltsänderungen erscheinen und verschwinden. Drucker können dennoch überlaufenden Inhalt drucken.

Das Element ist immer ein scroll container - auch wenn kein überlaufender Inhalt vorhanden ist - und ist sowohl benutzer- als auch programmgesteuert scrollbar.

div {
  overflow: scroll;
}

<div>
  <h2>overflow: scroll;</h2>
</div>
<div>
  <p>
    The <code>overflow</code> property in this example is set to
    <code>scroll</code>. A scroll container is created; a scrollbar is always
    visible, even if not needed.
  </p>
</div>

Im ersten Beispiel wird, auch wenn der Inhalt nicht überläuft, ein scroll container erstellt. Im zweiten Beispiel wird der Inhalt an die Padding-Box angepasst, wobei eine Scrollleiste das Scrollen zu dem überlaufenden Inhalt ermöglicht.

Der auto-Wert

Bei auto hängt es davon ab, ob das Element überlaufenden Inhalt hat, ob das Element Scrollleisten hat und ein scroll container ist. Wenn das Element überlaufenden Inhalt enthält, verhält es sich wie scroll: Der überlaufende Inhalt wird am Innenabstand des Elements abgeschnitten, und überlaufender Inhalt kann über Scrollleisten in den Sichtbereich gebracht werden. Im Gegensatz zu scroll zeigen Benutzeragenten Scrollleisten nur dann an, wenn der Inhalt überläuft. Wenn der Inhalt in den Innenabstand des Elements passt, sieht es aus wie bei visible, erstellt jedoch dennoch einen neuen Formatierungskontext. Der Elementkasten ist nur dann ein scroll container, wenn überlaufender Inhalt vorhanden ist.

div {
  overflow: auto;
}

<div>
  <h2>overflow: auto;</h2>
</div>
<div>
  <p>
    The <code>overflow</code> property in this example is set to
    <code>auto</code>. Because there is overflowing content, a scroll container
    is created. The content is clipped to the padding box and a scroll bar
    enables scrolling to the overflowing content.
  </p>
</div>

Bei der Verwendung der Zweisyntax wird, wenn ein Wert auf visible gesetzt ist, diese visible-Überlaufsrichtung wie auto verhalten, wenn der andere Wert nicht visible oder clip ist.

Der hidden-Wert

Mit hidden wird überlaufender Inhalt am Innenabstand des Elements abgeschnitten. Es gibt keine Scrollleisten, und der abgeschnittene Inhalt ist nicht sichtbar (d.h. er wird "versteckt").

Falls überlaufender Inhalt vorhanden ist, ist das Element ein scroll container. Während keine Scrollleisten vorhanden sind und der Benutzer den Inhalt außerhalb des abgeschnittenen Bereichs nicht durch Aktionen wie das Ziehen auf einem Touchscreen oder die Verwendung des Mausrads anzeigen kann, kann der versteckte Überlaufinhalt in den Sichtbereich gescrollt werden.

Enthält der Inhalt fokussierbare Elemente, wird durch Tabben das aktuell fokussierte Element in den Sichtbereich gebracht. Der Inhalt kann auch programmgesteuert gescrollt werden. Beim Setzen eines Werts für die scrollLeft- oder scrollTop-Eigenschaft wird diese Entfernung von der linken oder oberen Kante gescrollt. Sie können auch die Methode scrollTo() verwenden.

div {
  overflow: hidden;
}

<div>
  <h2>overflow: hidden;</h2>
</div>
<div>
  <p>
    The <code>overflow</code> property in this example is set to
    <code>hidden</code>. While hidden,
    <a
      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Content_categories#interactive_content"
      >interactive content</a
    >
    can be scrolled into view when focused. Because content overflows, the
    element is a scroll container, even though no scroll bars are present.
    Tabbing will give this
    <input aria-label="input" placeholder="input" /> focus and scroll it into
    view. This content is also programmatically scrollable.
  </p>
</div>

Das erste Beispiel hat keinen überlaufenden Inhalt und ist kein scroll container. Das zweite Beispiel hat überlaufenden Inhalt, der an die Padding-Box abgeschnitten wird. Obwohl keine Scrollleiste vorhanden ist, die das Scrollen zum überlaufenden Inhalt ermöglicht, kann der Inhalt in den Sichtbereich gescrollt werden, z.B. durch das Tabben zum <input> im versteckten Inhalt. Das zweite Beispiel ist ein scroll container.

Der clip-Wert

Mit clip ist überlaufender Inhalt standardmäßig verborgen, es sind keine Scrollleisten vorhanden und programmgesteuertes Scrollen ist nicht möglich. Das Element ist kein scroll container und es wird kein neuer Formatierungskontext erstellt. Wenn der abgeschnittene Inhalt interaktiven Inhalt enthält, erhält verborgener fokussierbarer Inhalt dennoch den Tastaturfokus, aber dieser Inhalt wird nicht in den Sichtbereich gescrollt, was ihn für Tastaturbenutzer unzugänglich macht.

Mit clip wird Überlaufinhalt an der overflow clip edge des Elements abgeschnitten, die mit der overflow-clip-margin-Eigenschaft definiert wird. Der abgeschnittene Inhalt überläuft den Innenabstand des Elements um den <length>-Wert von overflow-clip-margin, welcher standardmäßig 0px beträgt.

div {
  overflow: clip;
}

<div>
  <h2>overflow: clip;</h2>
</div>
<div>
  <p>
    The <code>overflow</code> property in this example is set to
    <code>clip</code>. When hidden,
    <a
      href="https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Content_categories#interactive_content"
      >interactive content</a
    >
    can NOT be scrolled into view when focused. Overflowing content is clipped
    to the container. No scroll container is created. Tabbing will give this
    <input aria-label="input" placeholder="input" /> focus but will not scroll
    it into view. Keyboard users will not be able to reach this content. This
    content is also not programmatically scrollable.
  </p>
</div>
<fieldset>
  <legend>Select a <code>overflow-clip-margin</code> value</legend>
  <ul>
    <li>
      <label
        ><input type="radio" name="overflow" value="0" /> overflow-clip-margin:
        0;</label
      >
    </li>
    <li>
      <label
        ><input type="radio" name="overflow" value="3em" />
        overflow-clip-margin: 3em;</label
      >
    </li>
  </ul>
</fieldset>

Das überlaufende Inhalt des zweiten Beispiels wird abgeschnitten. Beim Tabben zum <input> im versteckten Inhalt erhält das Element den Fokus, aber es wird nicht in den Sichtbereich gescrollt, was diesen Inhalt für Tastaturbenutzer unzugänglich macht.

Bei der Zweisyntax verhält sich, wenn ein Wert auf clip gesetzt ist, diese clip-Überlaufsrichtung wie hidden, wenn der andere Wert nicht auf visible oder clip gesetzt ist.

ul {
  list-style-type: none;
}
label {
  font-family: monospace;
}
:has([value="0"]:checked) div {
  overflow-clip-margin: 0;
}
:has([value="3em"]:checked) div {
  overflow-clip-margin: 3em;
}

@supports not (overflow-clip-margin: 0) {
  body::before {
    content: "Your browser doesn't support overflow-clip-margin yet.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;

    width: 100%;
  }
}

Mit scroll-gesteuerten Animationen

Beim Erstellen von scroll-gesteuerten Animationen mit der scroll()-Funktion sollten Sie clip anstelle von hidden verwenden, wenn im abgeschnittenen Bereich kein interaktiver Inhalt vorhanden ist, es sei denn, Sie möchten explizit einen scroll container erstellen.

Bei sowohl hidden als auch clip wird der Überlauf abgeschnitten, aber overflow: clip erstellt keinen scroll container, sodass abgeschnittene Elemente übersprungen werden, wenn der Benutzeragent im DOM-Baum nach dem nächsten Vorfahren-Scrollcontainer sucht.

Weil overflow: hidden bei existierendem Überlauf einen scroll container erstellt, können Sie unbeabsichtigt einen scrollenden Vorfahren erstellen, der nicht scrollt. Verwenden Sie jedoch nur clip, wenn Sie sicher sind, dass Sie keinen interaktiven Inhalt abschneiden werden.

div {
  height: 10em;
  width: 15em;
  border: 3px solid;
  padding: 10px;
  background-color: #ededed;
  background-clip: content-box;
}
p {
  font-size: 1.5rem;
  line-height: 1.6;
  font-family: sans-serif;
}
h2 {
  font-family: monospace;
}
body {
  height: 98vh;
  overflow: clip;
  display: flex;
  flex-flow: row wrap;
  gap: 3em;
}

Überlaufende ersetzte Elemente

Das Setzen von overflow bei Bildern und anderen ersetzten Elementen funktioniert wie erwartet in Browsern, die das CSS Overflow Module Level 4 unterstützen; in vorherigen Spezifikationsversionen wurden ersetzte Elemente immer an den Begrenzungscontainer abgeschnitten.

Entnehmen Sie bitte der Browser-Kompatibilität-Tabelle die aktuellen Informationen zur Unterstützung durch Browser.

Formale Definition

Formale Syntax

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

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

Barrierefreiheit

In einigen Browsern sind scrollenden Inhaltsbereiche über die Tastatur nicht fokussierbar, so dass sie von Tastaturnutzern nicht gescrollt werden können. Um sicherzustellen, dass alle Tastaturnutzer den Container scrollen können, ermöglichen Sie dem Element, den Fokus zu erhalten, indem Sie tabindex="0" am Container setzen. Um Bildschirmleser-Nutzern den Kontext beim Empfang des Fokus durch den Container zu geben, setzen Sie eine geeignete WAI-ARIA-Rolle am Container, wie role="region", und einen zugänglichen Namen mithilfe des Attributs aria-label oder aria-labelledby.

Beispiele

Ergebnisdarstellung verschiedener Overflow-Schlüsselwörter

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>

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;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• overflow-x, overflow-y
• overflow-block, overflow-clip-margin, overflow-inline
• clip, display, text-overflow, white-space
• SVG overflow-Attribut
• Scroll progress timelines
• CSS overflow-Modul
• CSS scroll-gesteuerte Animationen-Modul
• Nur-Tastatur-Scrollbereiche auf adrianroselli.com (2022)