Flex 高度分配 - daniel-qa/Vue GitHub Wiki

• Flex 高度分配-Code

100vh
 └─ page (flex column)
     ├─ header（固定高度）
     ├─ tabs（min-height）
     ├─ divider（1px）
     └─ content (flex:1, overflow-y:auto) ✅
         └─ Row (flex)
             ├─ left Col (flex column)
             │   ├─ 上半部 (flex:1)
             │   └─ 下半部 (flex:1)
             └─ right Col (flex column)
                 ├─ title (flex-shrink:0)
                 └─ list (flex:1, overflow)

100vh（高度的唯一來源）

content (flex:1)：吃「剩下的全部」
└─ content (flex:1, overflow-y:auto)

flex: 1：

👉 把「剩餘高度」全部吃掉

overflow-y: auto：

👉 唯一允許滾動的地方

所以整頁不會滾，只有內容在滾

這一層一定要是 div，不是 el-row

Row (flex)：開始切「左右」
└─ Row (flex)

這裡的角色轉換很重要 ⚠️

上面在切「上下」

這一層開始只管「左右」

👉 高度 完全繼承，不再自己算

left / right Col：左右欄容器 ├─ left Col (flex column) └─ right Col (flex column)

為什麼這兩個一定要：

display: flex;
flex-direction: column;

因為你接下來要在欄位裡再切上下

👉 一個欄位 = 一個小 page

• 左欄：上下 1:1 平分

left Col
├─ 上半部 (flex:1)
└─ 下半部 (flex:1)

這是最乾淨的比例切法：

不用算 px

不用管內容高度

螢幕變化自動適應

想改 2:1？

👉 flex:2 / flex:1

• 右欄：固定標題 + 滾動清單（經典版型）

right Col
├─ title (flex-shrink:0)
└─ list (flex:1, overflow)

這是企業後台最常見結構

為什麼穩？

標題：

flex-shrink: 0

永遠可見、不被擠

清單：

吃剩下的高度

自己滾，不影響整頁

為什麼這棵樹「不會壞」？

✅ 三個鐵律全符合

高度來源只有一個（100vh）

高度只往下傳，不用 height:100%

scroll 只出現在一層

只要守這三條，flex 版型幾乎不會爆