Flexbox children not having same height

Question

I thought flexbox makes its children having same height, meaning all children will be as tall as the highest (tallest) child and parent makes this by having default value of align-stretch for cross axis (if it is flex-row). In my case it is not like so. I have following pen: Codepen link

<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>

• Note that taller element (background red) is not having same height as the blue element.

• I am using tailwind.css here, but I think code is self explanatory.

Answer 1

Remove items-center class from the wrapper class - this was adding align-items: center to your flexbox and overriding the default stretch behaviour - see demo below:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.7.4/tailwind.min.css">

<div class="flex w-full flex-wrap">
  <!-- CHANGED HERE -->

  <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>