CSS：双层Flexbox布局下如何实现Overflow滚动效果？

问题场景 #

页面布局要求：

• 整体分为上下两行，第一行是输入框区域，第二行通过flex-1占据剩余屏幕高度
• 第二行内部是左右两列布局，左侧为可滚动列表，右侧为内容区域

但采用**垂直Flex（外层）+ 水平Flex（第二行内层）**的双层布局时，左侧列表无法触发overflow滚动，高度直接超出屏幕范围。只有给列表设置固定高度才能生效，但硬编码高度不够灵活；用calc(100vh - 固定高度)计算高度可行，但不是最优方案，而单层垂直Flex布局却能正常实现flex grow + overflow的组合效果。

问题原因 #

双层Flex布局中，外层垂直Flex的第二行（即内层水平Flex容器）默认遵循Flexbox的align-items: stretch特性，并且Flex容器的最小高度默认等于内容高度。这就导致内层水平Flex容器会被左侧列表的内容撑开，超出外层分配的剩余高度，进而让列表的overflow-y:auto失去作用——因为容器本身没有被限制高度，自然不会出现滚动条。

解决方案 #

给内层的水平Flex容器添加min-h-0（对应原生CSS的min-height: 0），解除其最小高度限制，让它能被外层的flex-1约束在剩余高度范围内。同时确保左侧列表容器设置overflow-y:auto。

正确的Tailwind布局代码示例 #

<!-- 外层垂直Flex容器，占满屏幕高度 -->
<div class="flex flex-col h-screen">
  <!-- 第一行：输入框区域 -->
  <div class="border-b p-4">
    <input 
      type="text" 
      class="w-full rounded border p-2" 
      placeholder="输入内容"
    >
  </div>
  <!-- 第二行：内层水平Flex容器，占剩余高度 + 解除最小高度限制 -->
  <div class="flex flex-1 min-h-0">
    <!-- 左侧可滚动列表 -->
    <div class="w-1/3 bg-gray-100 p-4 overflow-y-auto">
      <ul>
        <!-- 模拟大量列表项 -->
        <li class="border-b p-2" v-for="item in 50" :key="item">
          列表项 {{ item }}
        </li>
      </ul>
    </div>
    <!-- 右侧内容区域 -->
    <div class="flex-1 p-4">
      右侧内容展示区
    </div>
  </div>
</div>

原理说明 #

• min-h-0打破了Flex容器默认的“最小高度等于内容高度”的限制，让内层水平Flex容器能够被外层的flex-1严格限制在剩余高度内
• 此时左侧列表容器的高度会被父容器（水平Flex）约束，当列表内容超出容器高度时，overflow-y:auto就会触发滚动条，实现自适应高度的滚动效果

内容的提问来源于stack exchange，提问作者Huakun Shen