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

  • 總高度，控制是最外層的 div 100vh, (可調成自己想要的高度比例)

  • min-height: 0（這行是 MVP ）

👉 解決的是這個經典問題：

為什麼我 overflow-y: auto 卻不滾動？

原因是：

flex item 預設 min-height: auto

內容會把自己撐爆，導致 overflow 失效

min-height: auto 會根據內容自動撐開，不允許元素縮小到比內容更小。

✅ 加上 min-height: 0 等於告訴瀏覽器：

「你可以被壓縮，超出就給我滾動！」

只要在 flex 裡做 scroll container，幾乎都該加

<template>
  <!-- 100vh：高度的唯一來源 -->
  <div style="height: 90vh; width: 100%; display: flex; flex-direction: column; background: #f5f5f5;">
    
    <!-- header：固定高度 -->
    <div style="height: 60px; background: #fff; border-bottom: 1px solid #e8eaec; display: flex; align-items: center; padding: 0 20px; flex-shrink: 0;">
      <h2 style="margin: 0; font-size: 18px; font-weight: bold;">測試頁面標題</h2>
    </div>

    <!-- tabs：min-height -->
    <div style="min-height: 40px; background: #fff; display: flex; align-items: center; padding: 0 20px; flex-shrink: 0;">
      <span style="padding: 8px 16px; border-bottom: 2px solid #2d8cf0; color: #2d8cf0; font-weight: bold;">Tab 1</span>
      <span style="padding: 8px 16px; color: #666;">Tab 2</span>
    </div>

    <!-- divider：1px -->
    <div style="height: 1px; background-color: #e8eaec; flex-shrink: 0;"></div>

    <!-- content：flex:1, overflow-y:auto（唯一允許滾動的地方）-->
    <div style="flex: 1; width: 100%; padding: 20px; background: #ffffff; overflow-y: auto; display: flex; flex-direction: column;">
      
      <!-- Row：開始切左右，高度完全繼承 -->
      <Row style="flex: 1; display: flex;">
        
        <!-- left Col：flex column，準備切上下 -->
        <Col :span="16" style="border-right: 1px solid #e8eaec; padding-right: 20px; display: flex; flex-direction: column;">
          
          <!-- 上半部：flex:1 -->
          <div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #f0f9ff; border: 2px dashed #2d8cf0; border-radius: 8px; min-height: 0;">
            <h3 style="color: #2d8cf0; margin-bottom: 10px;">上半部 (flex: 1)</h3>
            <p style="color: #666;">這裡會自動佔據一半高度</p>
          </div>

          <!-- 分隔線 -->
          <div style="height: 1px; background-color: #e8eaec; margin: 20px 0; flex-shrink: 0;"></div>

          <!-- 下半部：flex:1 -->
          <div style="flex: 1; display: flex; flex-direction: column; padding: 20px; background: #fff7e6; border: 2px dashed #fa8c16; border-radius: 8px; min-height: 0;">
            <h3 style="color: #fa8c16; margin-bottom: 10px;">下半部 (flex: 1)</h3>
            <div style="flex: 1; overflow-y: auto; min-height: 0;">
              <p style="color: #666;">這裡也會自動佔據一半高度</p>
              <p style="color: #999; margin-top: 10px;">如果內容很多，這裡可以滾動：</p>
              <div v-for="i in 20" :key="i" style="padding: 8px; border-bottom: 1px solid #ffe7ba;">
                項目 {{ i }}
              </div>
            </div>
          </div>

        </Col>

        <!-- right Col：flex column，固定標題 + 滾動清單 -->
        <Col :span="8" style="padding-left: 20px; display: flex; flex-direction: column;">
          
          <!-- title：flex-shrink:0（永遠可見、不被擠）-->
          <h3 style="margin: 0 0 16px 0; color: #333; font-size: 16px; font-weight: bold; flex-shrink: 0;">
            右側標題（固定）
          </h3>

          <!-- list：flex:1, overflow（吃剩下的高度，自己滾）-->
          <div style="flex: 1; overflow-y: auto; overflow-x: hidden; background: #f5f5f5; border-radius: 8px; padding: 12px; min-height: 0;">
            <div v-for="i in 30" :key="i" style="background: #fff; padding: 12px; margin-bottom: 8px; border-radius: 4px; border: 1px solid #e8eaec;">
              <div style="font-weight: bold; color: #333; margin-bottom: 4px;">清單項目 {{ i }}</div>
              <div style="font-size: 12px; color: #999;">這是描述文字</div>
            </div>
          </div>

        </Col>

      </Row>

    </div>

  </div>
</template>

<script>
export default {
  name: 'TestComponent',
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

<style scoped>
</style>
⚠️ **GitHub.com Fallback** ⚠️