<div> 是 HTML 中的一個標簽，用于創建一個包含內容的塊級元素。它可以用于布局和樣式控制，但有時候我們會遇到一個問題，就是 <div> 內容顯示不下，導致布局混亂或內容溢出。在本文中，我們將詳細討論這個問題，并提供幾個代碼案例來解釋和解決這個問題。
一、使用 "Overflow" 屬性控制溢出內容
當一個 <div> 中的內容超過了其指定的寬度或高度時，溢出的部分默認會被隱藏。我們可以通過設置 "overflow" CSS 屬性來控制這個行為。
例如，如果想要溢出的內容顯示滾動條，可以使用 "overflow: auto;" 的樣式:

<div style="width: 200px; height: 100px; overflow: auto;">
<p>這是一個用于演示溢出內容的 <div>。</p>
<p>當內容超過指定的寬度或高度時，會顯示滾動條。</p>
<p>你可以用鼠標滾輪或拖動滾動條來查看全部內容。</p>
</div>

在上面的例子中，當內部內容超過 <div> 的寬度和高度時，會在右側和底部顯示滾動條，以便查看全部內容。
二、使用彈性布局解決顯示不下的問題
彈性布局是另一種常用的解決方案，它可以自動調整元素的大小和位置，以適應容器的大小。我們可以使用 "display: flex;" 的樣式來開啟彈性布局。
下面是一個簡單的示例，展示了使用彈性布局的 <div>：

<div style="display: flex; flex-wrap: wrap;">
<div style="flex: 1 1 200px; margin: 5px; background-color: red;"></div>
<div style="flex: 1 1 200px; margin: 5px; background-color: green;"></div>
<div style="flex: 1 1 200px; margin: 5px; background-color: blue;"></div>
<div style="flex: 1 1 200px; margin: 5px; background-color: yellow;"></div>
</div>

在這個例子中，我們創建了一個彈性容器，內部包含了四個 <div> 元素。每個 <div> 的寬度被設置為 200 像素，同時它們的彈性因子都被設置為 1，即它們的寬度將被平均分配。
三、使用 CSS Grid 布局進行多列布局
CSS Grid 布局是一個強大的多列布局系統，它可以幫助我們輕松地創建層疊式布局。我們可以將 <div> 分割成多個區域，并控制它們的大小和位置。
下面是一個展示了 CSS Grid 布局的 <div> 示例：

<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px;">
<div style="background-color: red;"></div>
<div style="background-color: green;"></div>
<div style="background-color: blue;"></div>
<div style="background-color: yellow;"></div>
<div style="background-color: orange;"></div>
</div>

在這個例子中，我們將 <div> 分割成三列，并設置它們的寬度比例為 1fr，即寬度平均分配。此外，我們還設置了 10 像素的間距。
<div> 顯示不下是布局中常見的問題，但我們可以使用一些技巧和方法來解決這個問題。我們可以通過設置 "overflow" 屬性來控制溢出內容的顯示方式，使用彈性布局來自動調整元素的大小和位置，或者使用 CSS Grid 布局進行多列布局。通過靈活運用這些技巧，我們可以更好地控制 <div> 的顯示效果，為用戶帶來更好的閱讀和瀏覽體驗。