在 CSS 中，我們常常會遇到一種情況，就是元素的寬度超過了其父級容器的寬度。這種情況可能會導致布局的混亂，影響頁面的整體美觀度和用戶體驗。那么，我們該如何解決這種問題呢？
其實，要解決這個問題，我們可以采用一些技巧和方法。首先，我們可以使用相對單位來定義元素的寬度，如百分比或 em 值。這樣，無論父級容器的寬度如何變化，子元素的寬度也會隨之變化，保持一個相對穩定的比例。
其次，我們可以使用 CSS 的盒模型。通過設置 padding 和 border 的值，我們可以保證元素的實際內容區域不會超出父級容器的寬度。同時，我們也可以使用 box-sizing 屬性來控制盒子模型的計算方式，從而實現更加靈活的布局。
最后，如果以上方法仍然無法解決問題，我們可以使用 overflow 屬性。通過設置 overflow 的值為 hidden，我們可以防止元素超出父級容器的邊界而影響布局和美觀度。當然，這種方法也可能會導致內容被裁剪掉一部分，需要根據具體情況進行權衡和調整。
綜上所述，當元素的寬度超過父級容器時，我們不必過于擔心或恐慌，只需要采取相應的方法和技巧，就能夠輕松解決這個問題，實現更加美觀和穩定的頁面布局效果。
代碼如下：

p {
width: 120%;
}
<br>
.box {
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #ccc;
}
<br>
.box-inner {
width: 120%;
height: 100px;
}
<br>
.overflow {
width: 100px;
height: 100px;
overflow: hidden;
}