如何在Tailwind中动态调整Grid内Div高度，实现底部对齐？

我用Grid布局实现了三个卡片组件，每个卡片高度随内容自动调整，但当其中一个卡片的文本内容过多时，另外两个卡片会被错误拉伸。尝试过h-max、h-full等Tailwind类都无法解决问题。需求是让每个卡片的中间内容区域自动扩展，确保所有卡片的底部始终对齐。

当前代码：

<div class="grid grid-cols-6 gap-4">
  <div class="bg-green shadow overflow-hidden sm:rounded-lg col-span-2">
      <div class="px-4 py-5 sm:px-6">
          <h3 class="text-lg leading-3 font-medium text-gray-100">24 Hours challenge</h3>
      </div>
      <div class="bg-gray-50 px-4 py-5 text-center">
          <a class="text-md font-bold text-gray-500">Ask a stranger if they would like to hear a poem you made. Then improvise a poem if they say yes</a>
      </div>
      <div class="bg-gray-100 px-4 py-1 text-center">
          <a class="text-sm font-medium text-gray-500">06:12:53 left</a>
      </div>
  </div>
  <div class="bg-green shadow overflow-hidden sm:rounded-lg col-span-2">
      <div class="px-4 py-5 sm:px-6">
          <h3 class="text-lg leading-3 font-medium text-gray-100">3 Days challenge</h3>
      </div>
      <div class="bg-gray-50 px-4 py-5 text-center">
          <a class="text-md font-bold text-gray-500">Act as if you know a stranger</a>
      </div>
      <div class="bg-gray-100 px-4 py-1 text-center">
          <a class="text-sm font-medium text-gray-500">30:07:00 left</a>
      </div>
  </div>
  <div class="bg-green shadow overflow-hidden sm:rounded-lg col-span-2">
      <div class="px-4 py-5 sm:px-6">
          <h3 class="text-lg leading-3 font-medium text-gray-100">Weekly challenge</h3>
      </div>
      <div class="bg-gray-50 px-4 py-5 text-center">
          <a class="text-md font-bold text-gray-500">Sing a song in public</a>
      </div>
      <div class="bg-gray-100 px-4 py-1 text-center">
          <a class="text-sm font-medium text-gray-500">54:06:43 left</a>
      </div>
  </div>
</div>

给每个卡片容器添加flex flex-col类，再给中间的内容区域添加flex-grow类，让中间区域自动填充卡片的剩余空间，即可实现所有卡片底部对齐的效果。修改后的代码如下：

<div class="grid grid-cols-6 gap-4">
  <!-- 第一个卡片 -->
  <div class="bg-green shadow overflow-hidden sm:rounded-lg col-span-2 flex flex-col">
      <div class="px-4 py-5 sm:px-6">
          <h3 class="text-lg leading-3 font-medium text-gray-100">24 Hours challenge</h3>
      </div>
      <!-- 中间区域添加flex-grow占据剩余空间 -->
      <div class="bg-gray-50 px-4 py-5 text-center flex-grow">
          <a class="text-md font-bold text-gray-500">Ask a stranger if they would like to hear a poem you made. Then improvise a poem if they say yes</a>
      </div>
      <div class="bg-gray-100 px-4 py-1 text-center">
          <a class="text-sm font-medium text-gray-500">06:12:53 left</a>
      </div>
  </div>
  <!-- 第二个卡片 -->
  <div class="bg-green shadow overflow-hidden sm:rounded-lg col-span-2 flex flex-col">
      <div class="px-4 py-5 sm:px-6">
          <h3 class="text-lg leading-3 font-medium text-gray-100">3 Days challenge</h3>
      </div>
      <div class="bg-gray-50 px-4 py-5 text-center flex-grow">
          <a class="text-md font-bold text-gray-500">Act as if you know a stranger</a>
      </div>
      <div class="bg-gray-100 px-4 py-1 text-center">
          <a class="text-sm font-medium text-gray-500">30:07:00 left</a>
      </div>
  </div>
  <!-- 第三个卡片 -->
  <div class="bg-green shadow overflow-hidden sm:rounded-lg col-span-2 flex flex-col">
      <div class="px-4 py-5 sm:px-6">
          <h3 class="text-lg leading-3 font-medium text-gray-100">Weekly challenge</h3>
      </div>
      <div class="bg-gray-50 px-4 py-5 text-center flex-grow">
          <a class="text-md font-bold text-gray-500">Sing a song in public</a>
      </div>
      <div class="bg-gray-100 px-4 py-1 text-center">
          <a class="text-sm font-medium text-gray-500">54:06:43 left</a>
      </div>
  </div>
</div>

关键说明 #

• flex flex-col：将卡片内部设置为垂直方向的Flex布局，使子元素能按垂直方向分配空间。
• flex-grow：给中间内容区域添加该类后，它会自动占据卡片中除顶部标题、底部倒计时之外的所有剩余空间，从而确保所有卡片的底部始终对齐，不受中间内容多少的影响。

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