Testen Sie Ihre Fähigkeiten: Überlauf

Aufgabe 1

In dieser Aufgabe überläuft der Inhalt die Box, weil sie eine feste Höhe hat.

Um die Aufgabe abzuschließen:

1. Aktualisieren Sie das CSS so, dass die Höhe beibehalten wird und die Box nur dann Scrollbalken hat, wenn genügend Text vorhanden ist, um einen Überlauf zu verursachen.
2. Testen Sie Ihre Lösung, indem Sie einen Teil des Textes aus dem HTML entfernen und überprüfen, ob bei nur einer kleinen Menge Text, 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 gibt es ein Bild in der Box, das größer als die Dimensionen der Box ist, sodass es sichtbar überläuft. Aktualisieren Sie das CSS so, dass jedes Bild außerhalb der Box verborgen 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