CSS: Overflow

自動滾動 overflow

overflow 定義了當元素的內容超出其容器邊界時應如何處理，選項如下：

visible: 預設值，內容不會被剪裁，會溢出容器。

hidden: 溢出部分會被隱藏。

auto: 根據需要自動提供滾動條。

scroll: 始終提供滾動條（即使內容沒有超出）。

overflow : auto;

• 父子組件-推薦組合

父容器	子容器	說明	推薦指數
hidden	auto	父固定範圍，子在框內滾動 → 最穩定、最常用	⭐⭐⭐
auto	hidden	父容器滾動，子內容固定 → 父控制整體滾動	⭐⭐
visible	auto	子容器可滾動，但可能突破父容器範圍 → 只適合彈窗或特殊情況	⭐
auto	auto	父子都可滾 → 雙捲軸，需小心 UX	⚠️

CSS overflow 是一層一層生效的，每個元素自己管自己的「可視範圍」