如何使用Tailwind实现flex列占满全屏不拉伸，内容溢出时滚动

实现代码 #

直接替换原有代码即可，列表内容再多也不会撑开白色容器，超出部分右列自动滚动：

<div class="flex flex-col min-h-screen bg-gray-100 p-6">
  <main class="flex flex-grow overflow-hidden">
    <div class="flex w-1/3 bg-white border border-gray-200 overflow-hidden">
      <div class="w-1/2 p-4">
        <p>左列</p>
      </div>
      <div class="flex flex-col w-1/2 p-4 overflow-hidden">
        <p class="shrink-0">右列</p>
        <ul class="flex-grow overflow-y-auto">
          <li>条目1</li>
          <li>条目2</li>
          <li>条目3</li>
          <li>条目4</li>
          <!-- 可自行增加大量条目测试滚动效果 -->
        </ul>
      </div>
    </div>
  </main>
</div>

核心修改说明 #

• 给main标签添加overflow-hidden：锁定main容器高度为视口减去外层上下内边距的固定值，不会随内部内容拉伸。
• 给左侧白色容器添加overflow-hidden：约束白色容器高度与main一致，不会被内部内容撑出边界。
• 给右列标题添加shrink-0：避免标题被后续滚动区域挤压高度。
• 给列表ul添加flex-grow和overflow-y-auto：让列表占满右列剩余可用高度，内容超出高度时自动触发纵向滚动，不会撑开父级容器。

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