CSS Grid布局下Flex搜索卡片多余空白问题排查

问题成因 #

1. 红色占位框高度未达标：卡片外层的flex h-full flex-col布局中，内容区域（带p-4的div）设置了h-full，强制占据剩余全部空间，干扰了图片容器h-64的高度计算，导致图片区域被间接挤压。
2. 标题与页脚间多余空白：多层嵌套的h-full（内容区域和内部justify-between容器均设置了h-full），使得短标题卡片中justify-between会将标题和页脚向两端拉伸，产生不必要的空白区域。

修复后的代码 #

<ul class="grid grid-cols-3 justify-center justify-items-center gap-x-8 gap-y-8">
  <li class="w-full">
    <div class="border-iwsr-blue flex h-full flex-col gap-2 overflow-hidden rounded-lg shadow-md">
      <div class="relative h-64 w-full overflow-hidden rounded-lg">
        <div class="h-full w-full" style="background:red"></div>
      </div>
      <div class="flex flex-col p-4 flex-1">
        <div class="flex flex-col justify-between flex-1">
          <div class="pb-2 font-serif text-2xl leading-7">Article 1</div>
          <div class="mt-2 text-xs text-gray-700"><span class="mr-3 font-bold">Article</span>29th November 2023</div>
        </div>
      </div>
    </div>
  </li>
  <li class="w-full">
    <div class="border-iwsr-blue flex h-full flex-col gap-2 overflow-hidden rounded-lg shadow-md">
      <div class="relative h-64 w-full overflow-hidden rounded-lg">
        <div class="h-full w-full" style="background:red"></div>
      </div>
      <div class="flex flex-col p-4 flex-1">
        <div class="flex flex-col justify-between flex-1">
          <div class="pb-2 font-serif text-2xl leading-7">Article with a longer title that goes over multiple lines</div>
          <div class="mt-2 text-xs text-gray-700"><span class="mr-3 font-bold">Article</span>17th October 2023</div>
        </div>
      </div>
    </div>
  </li>
</ul>

核心修改说明 #

• 图片高度修复：移除内容区域的h-full，替换为flex-1，让内容区域自动填充卡片剩余空间，不再挤压图片容器的固定高度h-64。
• 空白问题修复：移除内部justify-between容器的h-full，添加flex-1，确保该容器在内容区域内填充剩余空间，让justify-between仅在必要时拉伸内容，避免短标题时产生多余空白，同时稳定将页脚固定在卡片底部。

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