如何在Tailwind CSS中让flex-grow的div实现内容溢出滚动（无固定高度）

核心原因 #

父元素设置flex-grow和overflow-scroll时，若要让子元素的h-full生效，必须确保父元素拥有明确的高度上下文——要么父级构成完整的垂直flex布局链，要么父元素被限制在确定的高度范围内。

具体修复步骤 #

• 给包含目标flex-grow容器的上层容器添加flex flex-col类，构建垂直flex布局，让flex-grow容器能正确占据剩余空间，获得明确高度参考
• 给flex-grow容器添加overflow-hidden，避免子组件内容撑开父容器导致滚动失效
• 调整子组件内部结构：移除冗余高度设置，给卡片列表容器添加h-full overflow-y-auto，让列表内容超出时自动滚动

示例代码 #

父容器结构

<div class="flex flex-col h-screen">
  <!-- 顶部固定区域 -->
  <div class="h-16 bg-gray-200">顶部栏</div>
  <!-- 可滚动内容容器 -->
  <div class="flex-grow overflow-hidden">
    <app-card-list class="h-full"></app-card-list>
  </div>
</div>

子组件内部结构

<div class="h-full overflow-y-auto">
  <div class="p-4 border-b" *ngFor="let item of cardList">
    <!-- 卡片内容 -->
    <h3>卡片 {{ item.id }}</h3>
    <p>这是卡片的示例内容</p>
  </div>
</div>

关键说明 #

• overflow-hidden是核心：它能强制flex-grow容器保持固定的可用高度，让子组件的h-full能正确继承该高度
• 将滚动逻辑放在子组件内部的列表容器上，比直接给父容器加overflow-scroll更精准，避免父容器内其他元素被滚动影响

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