CODEWITHSUNDEEP
htmlcsstailwind-css
jus_fabi
jus_fabi

Reputation: 371

tailwindcss flexcols with different height

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)

Upvotes: 2

Views: 4766

Answers (2)

Nathan Dawson
Nathan Dawson

Reputation: 19338

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

Upvotes: 7

Mauro
Mauro

Reputation: 2555

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>

Upvotes: 1

Related Questions