# 🚀 筆記：破解 Flexbox 中的內容溢出（Overflow）陷阱

當我們在 Flex 佈局中使用 `overflow: auto` 或 `scroll` 時，常會發現捲軸沒出現，內容反而把父容器撐開。這通常是因為 Flex 項目的 **「隱含最小尺寸」** 預設行為導致的。

## 1. 核心原因：`min-height: auto`
在一般區塊元素（Block element）中，`min-height` 預設是 `0`。但在 Flexbox 規範中，為了防止內容被壓縮到看不見，Flex 項目的預設值是：
- **垂直排列時：** `min-height: auto`
- **水平排列時：** `min-width: auto`

> **白話解釋：** 元件預設會「強行撐開」以容納所有內容。即使父層固定了高度，子元件也會告訴父層：「我至少需要這麼高才能顯示完內容」，進而導致父層被撐爆。

---

## 2. 為什麼會發生「撐爆畫面」的連鎖效應？
這是一個典型的高度請求傳遞問題。假設有三層結構：

1. **祖父層 (Grandparent)**：設定 `h-screen` (100vh) 與 `flex`。
2. **父層 (Parent)**：也是 `flex`，但預設為 `min-h-auto`。
3. **子層內容 (Child)**：包含大量內容（例如長文章）。

**崩潰過程：**
- **子層**向**父層**請求 2000px 的高度。
- **父層**因為 `min-h-auto`，會認同這個請求，轉而向**祖父層**要求 2000px。
- 雖然**祖父層**只有 `100vh`，但因為 Flex 項目預設不會縮小到比內容小，最終**父層**會直接超出**祖父層**的範圍。
- 因為**父層**的高度被撐到了 2000px，它自認為「空間足夠」，所以 `overflow: auto` 永遠不會被觸發。

---

## 3. 解決方案：打破連鎖反應
要讓 `overflow` 生效，必須明確告訴 Flex 項目：「你可以縮小到比內部內容還小」。

### ✅ 方法 A：設定 `min-h-0` / `min-w-0` (最推薦)
在**想要出現捲軸的那一層**（通常是父層）設定：

/* 原生 CSS */
.parent {
  min-height: 0;
  overflow-y: auto;
}

/* Tailwind CSS */
/* <div class="flex-1 min-h-0 overflow-y-auto"> ... </div> */

### ✅ 方法 B：設定 flex-1 並搭配 overflow-hidden
在某些情況下，直接設定 `overflow: hidden` 或 `auto` 能強制建立新的格式化上下文，讓元件意識到自己不應該無限擴張。