Testen Sie Ihr Wissen: Überlauf

Aufgabe 1

In dieser Aufgabe läuft der Inhalt aus dem Kasten heraus, da er eine feste Höhe hat.

Um die Aufgabe abzuschließen:

1. Aktualisieren Sie das CSS, so dass die Höhe beibehalten wird und der Kasten nur dann Scrollbalken hat, wenn genug Text vorhanden ist, um einen Überlauf zu verursachen.
2. Testen Sie Ihre Lösung, indem Sie etwas Text aus dem HTML entfernen und prüfen, dass, wenn nur eine kleine Menge Text vorhanden ist, die nicht überläuft, kein Scrollbalken erscheint.

Ihr Endergebnis sollte wie die folgende Darstellung aussehen:

<div class="box">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.box {
  border: 5px solid black;
  padding: 1em;
  height: 200px;
  width: 300px;
}

Dies ist der Ausgangszustand der Aufgabe:

.box {
  overflow: auto;
}

Aufgabe 2

In dieser Aufgabe befindet sich ein Bild im Kasten, das größer ist als die Abmessungen des Kastens und dadurch sichtbar überläuft. Aktualisieren Sie das CSS, sodass jedes Bild außerhalb des Kastens ausgeblendet wird.

Ihr Endergebnis sollte wie die folgende Darstellung aussehen:

<div class="box">
  <img
    alt="flowers"
    src="https://mdn.github.io/shared-assets/images/examples/flowers.jpg" />
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  border: 5px solid black;
  height: 200px;
  width: 300px;
}

Dies ist der Ausgangszustand der Aufgabe:

.box {
  overflow: hidden;
}

• Zurück
• Übersicht: Grundlagen der CSS-Gestaltung
• Weiter