CSS Overflow 導致展開內容覆蓋下方元素：缺少 height:auto

問題代碼

.open { overflow: visible; }
.close { overflow: hidden; }
dl { overflow: hidden; height: 16px; }

點擊展開（`.open`）時，`dl` 高度仍被 `height: 16px` 限制，內容溢出覆蓋後續元素。

修正

.open { overflow: visible; height: auto; } /* 關鍵：恢復自動高度 */
.close { overflow: hidden; }
dl { overflow: hidden; height: 16px; }

原理

CSS 繼承規則導致 `.open` 繼承了 `dl` 的 `height: 16px`。`overflow: visible` 僅允許內容溢出顯示，不會撐開父元素高度。必須顯式設置 `height: auto` 讓父元素根據內容計算高度，從而推開後續元素。

現代替代方案

使用 `max-height` 配合 `transition` 實現平滑展開動畫：

dl { overflow: hidden; max-height: 16px; transition: max-height 0.3s; }
dl.open { max-height: 500px; /* 足夠大的值 */ }

避免 `height: auto` 無法動畫的缺點。