測試你的技能：溢位

此技能測試的目的是評估你是否理解CSS 中的溢位以及如何管理它。

注意：你可以在此頁面上的互動式編輯器中或線上編輯器（如CodePen、JSFiddle或Glitch）中嘗試解決方案。

如果您遇到困難，可以透過我們的溝通渠道聯絡我們。

任務 1

在這個任務中，內容溢位了盒子，因為盒子高度固定。保持高度，但僅當文字足夠多導致溢位時才使盒子出現捲軸。透過從 HTML 中刪除一些文字進行測試，如果只有少量文字不會溢位，則不會出現捲軸。

A small box with a border and a vertical scrollbar.

嘗試更新下面的即時程式碼以重現完成的示例。

下載此任務的起始點，以便在您自己的編輯器或線上編輯器中進行編輯。

任務 2

在這個任務中，盒子中有一張影像，其尺寸大於盒子，因此會明顯溢位。將其更改為隱藏盒子外部的任何影像。

您的最終結果應如下面的影像所示。

A box with an image which fills the box but does not spill out the edges.

嘗試更新下面的即時程式碼以重現完成的示例。

下載此任務的起始點，以便在您自己的編輯器或線上編輯器中進行編輯。