Tailwind - 灵活划船的孩子身高不会增长

Question

我有以下内容：

.flex .flex-row .flex #1 .flex #2

两个弹性盒的高度相同。当内容发生.flex #2变化时，两个弹性框的高度也会在底部留下大量空白空间 .flex #1

如何防止这种情况发生并导致 的内容.flex #2滚动？

我不想设置任何固定高度，希望 的高度始终与的内容.flex #2高度保持相同。.flex #1

Answer 1

我想你正在寻找.items-stretch。

示例：（因为您没有添加自己的代码）

<div class="flex items-stretch bg-gray-200 h-24">
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

将产生相同的 div 高度：