测试你的技能：溢出
本技能测试的目的是评估你是否理解 CSS 溢出以及如何管理它。
¥The aim of this skill test is to assess whether you understand overflow in CSS and how to manage it.
注意：你可以在此页面上的交互式编辑器或在线编辑器（例如 CodePen、JSFiddle 或 Glitch）中尝试解决方案。
¥Note: You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.
如果你遇到困难，可以通过我们的 沟通渠道 之一与我们联系。
¥If you get stuck, you can reach out to us in one of our communication channels.
任务 1
¥Task 1
在此任务中，内容溢出了框，因为它具有固定的高度。保持高度，但仅当有足够的文本导致溢出时才使框具有滚动条。通过从 HTML 中删除一些文本进行测试，如果只有少量文本不溢出，则不会出现滚动条。
¥In this task, the content is overflowing the box because it has a fixed height. Keep the height but cause the box to have scrollbars only if there is enough text to cause an overflow. Test by removing some of the text from the HTML, that if there is only a small amount of text that does not overflow, no scrollbar appears.
尝试更新下面的实时代码以重新创建完成的示例：
¥Try updating the live code below to recreate the finished example:
下载此任务的起点 在你自己的编辑器或在线编辑器中工作。
¥Download the starting point for this task to work in your own editor or in an online editor.
任务 2
¥Task 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. Change it so that any image outside of the box is hidden.
你的最终结果应如下图所示：
¥Your final result should look like the image below:
尝试更新下面的实时代码以重新创建完成的示例：
¥Try updating the live code below to recreate the finished example:
下载此任务的起点 在你自己的编辑器或在线编辑器中工作。
¥Download the starting point for this task to work in your own editor or in an online editor.