Html 身高不一样的Flexbox儿童

我认为flexbox使其子对象具有相同的高度，这意味着所有子对象都将与最高（最高）的子对象一样高，而父对象通过将默认值“横向轴对齐拉伸”（如果是flex row）来实现这一点。就我而言，情况并非如此。 我有以下钢笔：

小文本
这一个有更小的文本

控制元素高度的较大文本

蓝色元素有更多的文本，从而使红色元素更小，无法适应整个高度

• 请注意，较高的元素（背景红色）与蓝色元素的高度不同

• 我在这里使用tailwind.css，但我认为代码是不言自明的

---

从包装类中删除

项目中心

类-这是将

对齐项目：中心

添加到flexbox并覆盖默认拉伸行为-请参阅下面的演示：

小文本
这一个有更小的文本

控制元素高度的较大文本

蓝色元素有更多的文本，从而使红色元素更小，无法适应整个高度

<div class="flex w-full items-center flex-wrap">
   <div class="flex flex-col md:w-1/2 items-center px-16 py-20 bg-red">
      <h2 class="marjan-col">Smaller text</h2>
      <p>This one has smaller text</p>
   </div>
   <div class="flex flex-col md:w-1/2 items-center px-16 py-20 bg-blue">
      <h2 class="text-white">Bigger text that controls element height</h2>
      <p class="text-white">
         Blue element has more text thus making red element smaller and unable to fit entire height 
      </p>
   </div>
</div>