不同高度的tailwindcss flexcols

Question

I want to split the div into two parts with individuals heights. But the flex and grid classes from tailwind will stretch the height of the smaller child to the height of the other child.

At the moment it looks like this

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/> <div class="flex flex-row"> <div class="bg-green-500 w-1/2"> <div class="h-4"></div> </div> <div class="bg-red-500 w-1/2"> <div class="h-12"></div> </div> </div>

How do I achieve individual height? (the content of the Childs is programmatically set and does not always have the same height)

Answer 1

Just move the h- class on the parent div

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/> <div class="flex flex-row h-min"> <div class="h-4 bg-green-500 w-1/2"> <div class=""></div> </div> <div class="h-12 bg-red-500 w-1/2"> <div class=""></div> </div> </div>

Answer 2

In flexbox, the default behaviour for align-items is stretch . That will in effect match the heights of all your elements that are in a line. You need to change that to flex-start instead.

Add the .items-start class.

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/> <div class="flex flex-row items-start"> <div class="bg-green-500 w-1/2"> <div class="h-4"></div> </div> <div class="bg-red-500 w-1/2"> <div class="h-12"></div> </div> </div>

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items