overflow

Sobald ein Element eine begrenzte Höhe hat und mehr Inhalt, als hineinpasst, muss jemand entscheiden, was mit dem Rest passiert.

<div class="kasten sichtbar"><p>Sichtbar: der Text läuft unten einfach heraus und legt sich über alles, was darunter kommt. Der Kasten selbst bleibt dabei genau so hoch, wie er ist, und merkt gar nicht, dass etwas fehlt.</p></div>
<div class="kasten versteckt"><p>Versteckt: der Text ist abgeschnitten und es gibt keinen Weg, an den Rest heranzukommen. Weder mit der Maus noch mit der Tastatur, er ist schlicht nicht mehr da.</p></div>
<div class="kasten scrollt"><p>Auto: eine Leiste erscheint genau dann, wenn sie gebraucht wird, und sonst nicht. Bei kurzem Inhalt sieht dieser Kasten deshalb aus wie jeder andere auch.</p></div>

.kasten {
  box-sizing: border-box;
  width: 220px;
  max-height: 90px;
  padding: 8px;
  margin-bottom: 24px;
  background-color: #dbeafe;
}

.kasten p {
  margin: 0;
}

.sichtbar {
  overflow: visible;
}

.versteckt {
  overflow: hidden;
}

.scrollt {
  overflow: auto;
}

visible ist der Standard. Der Inhalt läuft heraus und legt sich über das, was darunter liegt.

hidden schneidet ab und zeigt keine Leiste. Weg ist der Rest damit nicht. Ein Screenreader liest ihn vor, und ein Link darin rollt ins Bild, sobald er mit der Tab-Taste den Fokus bekommt.

scroll zeigt immer eine Leiste, auch wenn sie gar nicht gebraucht wird. Das gilt, wo Leisten ständig stehen, unter Windows etwa. Auf dem Telefon und bei macOS in der Grundeinstellung erscheinen sie nur beim Scrollen, und dort sieht scroll aus wie auto.

auto zeigt sie nur, wenn nötig, und deshalb nehme ich fast immer diesen Wert.

01 / 03Nur in eine Richtung

Dazu gibt es die achsenweisen Varianten overflow-x und overflow-y, wenn nur eine Richtung gemeint ist.

<div class="kasten">
  <img src="/lernen/media/arbeitsplatz-600.jpg" alt="Ein Schreibtisch vor einer dunkelgrünen Wand mit Notizbuch, Farn, Tasse und Laptop" width="600" height="338">
</div>

.kasten {
  box-sizing: border-box;
  width: 280px;
  padding: 8px;
  background-color: #dbeafe;
  /* Nur waagerecht: die Höhe richtet sich weiter
     nach dem Bild. */
  overflow-x: auto;
}

.kasten img {
  display: block;
}

Das Foto ist 600 Pixel breit, sein Kasten 280. Mit overflow-x: auto scrollt der Kasten waagerecht, und nur dort. Seine Höhe richtet sich weiter nach dem Bild. Derselbe Fall kommt später bei breiten Tabellen wieder, die waagerecht scrollen dürfen und senkrecht nicht.

Eine Eigenheit der beiden Achsen fällt im Streifen auf. Steht eine Achse auf auto, scroll oder hidden, kann die andere nicht visible bleiben. Der Browser macht aus dem visible dann ein auto, und im Reiter „Werte“ steht overflow-y: auto, obwohl du es nie geschrieben hast. Zu sehen ist davon erst etwas, wenn auch senkrecht etwas übersteht. Dann bekommt der Kasten eine zweite Leiste, statt den Inhalt herauslaufen zu lassen.

02 / 03Scrollen mit der Tastatur

Mit der Maus oder dem Finger scrollt eine solche Fläche von selbst. Mit der Tastatur scrollt sie erst, wenn sie den Fokus hat, und den bekommt sie über einen Link oder ein Feld darin. Steht in der Fläche nur Text, machen neuere Versionen von Chrome und Firefox sie inzwischen von allein anspringbar, Safari und ältere Versionen nicht. Dort hilft tabindex="0" an der Fläche selbst, eine Zeile im HTML. In Lektion 14.3 steht es an der Hülle einer breiten Tabelle schon da.

03 / 03Erst die Höhe, dann overflow

Ein Überlauf entsteht fast immer dort, wo eine Größe festgenagelt ist, die besser eine Grenze wäre (Lektion 4.3). Bevor ich overflow: hidden schreibe, frage ich deshalb zuerst, ob die Höhe wirklich fest sein muss. Meistens ist die ehrlichere Antwort nein, und dann reicht max-height oder gar keine Höhe.

Braucht es wirklich eine Scrollfläche, gehören zwei Angaben zusammen, eine Höchsthöhe, damit der Kasten aufhört zu wachsen, und overflow: auto, damit der Rest erreichbar bleibt.

In der Aufgabe wächst eine Karte mit jeder Neuigkeit weiter nach unten, und daneben steht eine kurze.