Tailwind - Flex 行儿童不会长高

Posted 2023-03-07

【中文标题】Tailwind - Flex 行儿童不会长高

【英文标题】：Tailwind - Flex row children don't grow in height

【发布时间】：2020-04-20 00:43:43

【问题描述】：

我有以下几点：

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

两个弹性盒子的高度相同。当.flex #2 的内容改变两个弹性盒子的高度时，.flex #1 的底部也会留下很多空白空间

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

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

【问题讨论】：

您应该提供一个示例，以便我们可以看到您的代码的上下文:)

通常拉伸是默认设置，但我猜顺风会改变

【参考方案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 高度：