为何设置height:100%会让Flex子卡片缩小，移除后反而填充高度？

这是Flex布局里常见的反直觉行为，根源在于Flex容器的高度计算逻辑和height:100%的生效条件：

1. 为什么移除h-full反而高度统一？
   Flex容器设置items-stretch（你的代码里已包含该类）时，默认会让所有子元素（卡片）自动拉伸到容器的交叉轴高度——这个高度由容器内最高的子元素撑起来。此时子元素无需额外设置高度，Flex布局会自动完成高度对齐。

2. 为什么加了h-full反而高度不一致？
   height:100%生效的前提是父元素有明确的固定高度值，而非由子元素内容动态撑开。你的Flex容器未设置固定高度，它的高度完全由子元素内容决定。这时给卡片加h-full，相当于要求卡片“和父容器一样高”，但父容器的高度又依赖子元素内容，形成循环依赖。最终浏览器会忽略这个height:100%，让卡片回到自身内容的高度，导致高矮不一。

正确做法 #

直接移除卡片上的h-full类，保留Flex容器的items-stretch（你的代码里已有该类，无需额外修改），就能让所有卡片自动拉伸到最高卡片的高度。

修改后的核心代码：

<ul className="flex flex-col gap-4 items-stretch md:flex-row md:flex-wrap">
  <li className="border-2 rounded-lg p-2 w-80">...</li>
</ul>

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