Test your skills: Overflow

Overflow 1

In this task, the content is overflowing the box because it has a fixed height.

To complete the task:

1. Update the CSS so that the box height is maintained and scrollbars appear only when there is enough text to cause an overflow.
2. Test your solution by removing some text from the HTML and checking that no scrollbar appears when there is only a small amount of text.

The starting point of the task looks like this:

Here's the underlying code for this starting point:

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

The updated styling should look like this:

.box {
  overflow: auto;
}

Overflow 2

In this task, there is an image in the box that is bigger than the dimensions of the box so that it overflows visibly. Update the CSS so that any image outside of the box is hidden.

The starting point of the task looks like this:

Here's the underlying code for this starting point:

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

The updated styling should look like this:

.box {
  overflow: hidden;
}

• Previous
• Overview: CSS styling basics
• Next