Flex box column not equal width with flex: 1 - css

Question

Hi I am trying to make flex columns equal width but it doesn't seem to be working with flex: 1.
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet" />
<section class="flex flex-wrap w-full justify-center items-center content-center mt-20 lg:mt-0 min-h-85 fade fadeout">
<div class="flex flex-col w-full md:w-1/3 max-w-md items-center bg-red-100">
<div class="py-12 flex-1 bg-red-200">
<h4 class="font-semibold tracking-widest text-xs">Box 1</h4>
<p>Box 1 Flexbox 00000000</p>
</div>
</div>
<div class="flex flex-col w-full md:w-1/3 max-w-md items-center bg-blue-100">
<div class="py-12 flex-1 bg-blue-200">
<h4 class="font-semibold tracking-widest text-xs">Box 2</h4>
<p>Box 2 Flexbox 0</p>
</div>
</div>
<div class="flex flex-col w-full md:w-1/3 max-w-md items-center bg-green-100">
<div class="py-12 flex-1 bg-green-200">
<h4 class="font-semibold tracking-widest text-xs">Box 3</h4>
<p>Box 4 Flexbox 000</p>
</div>
</div>
</section>
I want it to be the size of the flex col with the widest content.

Answer 1

The flex: 1 isn't applied to flex item siblings.
It's applied to the children of those siblings (i.e., cousins).
Therefore, there's no association between the items with flex: 1, and there's no reason for them to be equal length.

Answer 2

This is the solution I come to
If an element has flex: 1 , this means the size of all of the other elements will have the same width as their content, but the element with flex: 1 will have the remaining full space given to it.
Soln
You can use grid grid-cols-{n} to equally distribute a row into n number of columns . I had shared the code below .
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css" rel="stylesheet" />
<section class="flex flex-wrap w-full justify-center items-center content-center mt-20 lg:mt-0 min-h-85 fade fadeout">
<div class="grid grid-cols-3 w-full md:w-1/3 max-w-md items-center bg-red-100">
<div class="bg-red-100"></div>
<div class="py-12 flex-1 bg-red-200 text-center">
<h4 class="font-semibold tracking-widest text-xs">Box 1</h4>
<p>Box 1 Flexbox 00000000</p>
</div>
<div class="bg-red-100"></div>
</div>
<div class="grid grid-cols-3 w-full md:w-1/3 max-w-md items-center bg-blue-100">
<div class="bg-blue-100"></div>
<div class="py-12 flex-1 bg-blue-200 text-center">
<h4 class="font-semibold tracking-widest text-xs">Box 2</h4>
<p>Box 2 Flexbox 0</p>
</div>
<div class="bg-blue-100"></div>
</div>
<div class="grid grid-cols-3 w-full md:w-1/3 max-w-md items-center bg-green-100">
<div class="bg-green-100"></div>
<div class="py-12 flex-1 bg-green-200 text-center">
<h4 class="font-semibold tracking-widest text-xs">Box 3</h4>
<p>Box 4 Flexbox 000</p>
</div>
<div class="bg-green-100"></div>
</div>
</section>
For more info refer the docs here