用Tailwind CSS实现WhatsApp聊天预览卡片：如何让中间列占满剩余空间？

Grid布局：让第二列占据剩余全部空间 #

要实现Grid布局中中间列占满剩余空间，核心是通过自定义列宽分配，让头像和时间列自适应内容宽度，中间列使用弹性分配剩余空间：

1. 使用Tailwind的grid-cols-[auto_1fr_auto]类定义列布局：
   • auto：让头像、时间列根据自身内容自动调整宽度
   • 1fr：将容器剩余的所有可用空间分配给中间内容列
2. 中间内容区添加min-w-0，确保内容过长时能被截断，不会撑破Grid布局

示例代码：

<div class="grid grid-cols-[auto_1fr_auto] items-center gap-3 p-3 border rounded-lg">
  <!-- 头像 -->
  <div class="w-12 h-12 rounded-full bg-gray-200"></div>
  <!-- 中间内容区 -->
  <div class="min-w-0">
    <h3 class="font-semibold truncate">联系人名称</h3>
    <p class="text-gray-500 truncate">最新消息内容，可能比较长需要截断显示</p>
  </div>
  <!-- 时间 -->
  <div class="text-gray-500 text-sm">10:30</div>
</div>

Flex布局：解决时间元素超出父容器边框问题 #

Flex布局下时间元素溢出，本质是未合理分配空间导致内容撑破容器，解决方案如下：

1. 父容器使用flex items-center实现水平居中对齐
2. 中间内容区添加flex-1 min-w-0：
   • flex-1：占据容器剩余的所有可用空间
   • min-w-0：允许内容区宽度收缩，避免挤压时间元素
3. 时间元素添加shrink-0，防止被压缩变形，同时确保其宽度自适应内容

示例代码：

<div class="flex items-center gap-3 p-3 border rounded-lg">
  <!-- 头像 -->
  <div class="w-12 h-12 rounded-full bg-gray-200 shrink-0"></div>
  <!-- 中间内容区 -->
  <div class="flex-1 min-w-0">
    <h3 class="font-semibold truncate">联系人名称</h3>
    <p class="text-gray-500 truncate">最新消息内容，可能比较长需要截断显示</p>
  </div>
  <!-- 时间 -->
  <div class="text-gray-500 text-sm shrink-0">10:30</div>
</div>

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