Tailwind CSS中展开Div不影响同行其他列布局的实现方法

问题描述 #

使用Tailwind CSS构建布局时，点击卡片内按钮展开BadgeStatus组件，整行下方的视图会被整体向下推动。需要实现仅展开视图所在的卡片（列）高度变化，不影响其他列及下方行的布局。

相关代码如下：
主卡片组件：

<div class="rounded-lg bg-blue-700 px-4 py-2">
  <div class="flex flex-row items-center">
    <h1 class="font-semibold text-2xl">{project.name}</h1>
    <div class="flex-grow" />
    <Overflow />
  </div>
  <span>{project.desc}</span>
  <BadgeStatus />
</div>

BadgeStatus组件：

<div ref={dropdownRef} 
  class="flex flex-row mx-2 mb-2 mt-2 px-2 py-2 rounded-md bg-green-50"
  style={{height: height}}>
  <span>Test</span>
  <div class="flex-grow" />
  <button onClick={() => setOpen(!open)}>
    <!-- Dropdown arrow -->
  </button>
</div>

正常布局：

展开后布局：

解决方案 #

核心问题是默认的网格/弹性布局会强制同行元素高度对齐，单个卡片高度变化时会撑高整行，进而推动下方内容。以下是两种针对性解决方法：

方法1：让卡片高度独立（Grid/Flex通用）

如果使用Grid布局，给网格容器添加items-start类，取消同行元素等高强制：

<!-- 网格容器 -->
<div class="grid grid-cols-3 gap-4 items-start">
  <!-- 卡片组件 -->
  <div class="rounded-lg bg-blue-700 px-4 py-2">...</div>
</div>

如果使用Flex布局，给每个卡片添加self-start类，让卡片高度自适应：

<!-- Flex容器 -->
<div class="flex gap-4">
  <!-- 卡片组件 -->
  <div class="rounded-lg bg-blue-700 px-4 py-2 self-start">...</div>
</div>

设置后，每个卡片会根据自身内容高度渲染，互不影响，展开单个卡片时不会推动其他列及下方内容。

方法2：展开内容脱离文档流（适合保持卡片主体高度一致）

若希望卡片主体高度统一，仅展开内容悬浮显示，可通过绝对定位让展开部分脱离文档流：

1. 给主卡片添加relative类，作为定位容器：

<div class="rounded-lg bg-blue-700 px-4 py-2 relative">
  <!-- 原有内容 -->
</div>

2. 修改BadgeStatus组件，将展开内容设置为绝对定位：

<div class="flex flex-row mx-2 mb-2 mt-2 px-2 py-2 rounded-md bg-green-50">
  <span>Test</span>
  <div class="flex-grow" />
  <button onClick={() => setOpen(!open)}>
    <!-- Dropdown arrow -->
  </button>
  <!-- 展开内容容器 -->
  {open && (
    <div class="absolute left-0 right-0 top-full bg-green-50 rounded-b-md p-2">
      <!-- 展开的具体内容 -->
    </div>
  )}
</div>

这种方式下，展开内容会悬浮在卡片下方，不占用文档流空间，不会影响其他元素布局。

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