Tailwind & Flexbox：如何限制容器避免溢出与扩张？

我在用Tailwind的flex类约束div容器时遇到了问题——想让容器内的div内容可滚动，试了h-full、flex-grow、flex-none等多种组合都没解决。目标是让容器在红线处截断，内部内容滚动，当前布局代码如下：

<div class="flex flex-col h-screen w-screen">

  <div class="flex flex-row">Page Header</div>

  <div class="flex flex-row h-2/3">
    <div class="flex flex-col w-3/4 h-full"> <!-- 这个容器被错误地允许撑开 -->
      <div class="flex flex-row">
         Header Left
      </div>

      <div class="flex flex-row divide-x flex-grow">

        <div class="flex flex-col w-1/3 flex-grow">

          <div>Subhead 1</div>

          <div class="flex flex-col gap-4 flex-grow overflow-y-auto">
             // 要滚动的内容 //
          </div>

        </div>
      </div>
    </div>
  </div>

  <div class="flex flex-grow flex-col border-t-red-600">
    <div>下方区域内容</div>
  </div>

</div>

问题原因 #

标注的外层flex容器缺少overflow-hidden属性，导致它会跟随内部内容自动撑开，无法维持设定的高度，进而让滚动区域的overflow-y-auto失效。

解决方法 #

给标注的容器添加overflow-hidden，强制它在设定高度内截断，同时确保滚动区域的父级高度约束生效：

<div class="flex flex-col h-screen w-screen">
  <div class="flex flex-row">Page Header</div>
  <div class="flex flex-row h-2/3">
    <div class="flex flex-col w-3/4 h-full overflow-hidden"> <!-- 新增overflow-hidden限制高度 -->
      <div class="flex flex-row">
         Header Left
      </div>
      <div class="flex flex-row divide-x flex-grow">
        <div class="flex flex-col w-1/3 flex-grow">
          <div>Subhead 1</div>
          <div class="flex flex-col gap-4 flex-grow overflow-y-auto">
             // 要滚动的内容 //
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-grow flex-col border-t-red-600">
    <div>下方区域内容</div>
  </div>
</div>

修改说明 #

• overflow-hidden：强制容器在h-full高度内截断，阻止内容撑开容器
• 保留滚动区域的overflow-y-auto：内容超出容器高度时自动显示垂直滚动条
• 所有父级flex容器的高度约束（如h-2/3、h-full）保持生效，确保布局整体高度可控

内容的提问来源于stack exchange，提问作者Adam Starrh