任务 1
在此任务中，由于框的高度是固定的，内容超出了框的范围。
完成任务
- 更新 CSS，使高度保持不变，并且只有当文本足够多导致溢出时，框才会显示滚动条。
- 通过从 HTML 中删除一些文本来测试您的解决方案，并检查当文本量很少而不溢出时，不显示滚动条。
您的最终结果应如下面的图片所示
html
<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>
css
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
border: 5px solid black;
padding: 1em;
height: 200px;
width: 300px;
}
点击此处显示解决方案
您应该添加 overflow: auto，这样只有当内容过大时，框才会显示滚动条。
css
.box {
overflow: auto;
}
任务 2
在此任务中，框中有一个图像，该图像比框的尺寸大，从而导致可见的溢出。更新 CSS，以隐藏框外的任何图像。
您的最终结果应如下面的图片所示
html
<div class="box">
<img
alt="flowers"
src="https://mdn.github.io/shared-assets/images/examples/flowers.jpg" />
</div>
css
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
border: 5px solid black;
height: 200px;
width: 300px;
}
点击此处显示解决方案
您应该向 .box 选择器添加 overflow: hidden。
css
.box {
overflow: hidden;
}