CSS/Tailwind: Why does justify-between send element to bottom instead of content-between?

Question

community,

I have a quick question. I am using the current version of Tailwind CSS.

My goal was to send the button (corpus delicti) to the bottom of the parent div. I was using content-between the whole time but that didn't work. So I tried just for fun justify-between and the button element was sent to the bottom of the parent div. I don't get it. Why is that?

In CSS docs it is stated that "

...The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container [...]."

Here is the CSS code:

<div class="flex flex-col h-4/5 px-5 items-center justify-center space-x-0 md:flex-row md:space-x-24">


    <div id="parent-div" class="flex flex-col justify-between p-5 w-96 h-96 bg-red-400 ">

      <div class="flex flex-col">
        <h1 class="text-3xl font-bold">foo</h1>
        <p class="text-red-900">bar</p>
        <p class="text-red-900">hoo</p>
      </div>

      <div class="flex flex-row justify-end">
        <button class="w-32 flex flex-row justify-center bg-white rounded-lg shadow-xl">corpus delicti</button>
      </div>

    </div>
    
    <div class="w-96 h-96 bg-yellow-400 flex items-center justify-center md:justify-start">      
      <img class="object-contain" src="../static/pics/gif.gif">
    </div>


</div>

Would be very glad to get an answer, since that behavior totally destroys my very hard-earned trust in CSS.

THX in advance!

Answer 1

Get rid of flex-col on #parent-div and use h-fit (height: fit-content;) on your button.

See here

<div class="flex flex-col h-4/5 px-5 items-center justify-center space-x-0 md:flex-row md:space-x-24">


  <div id="parent-div" class="flex justify-between p-5 w-96 h-96 bg-red-400 ">

    <div class="flex flex-col">
      <h1 class="text-3xl font-bold">foo</h1>
      <p class="text-red-900">bar</p>
      <p class="text-red-900">hoo</p>
    </div>

    <div class="flex justify-end">
      <button class="w-32 flex h-fit flex-row justify-center bg-white rounded-lg shadow-xl">corpus delicti</button>
    </div>

  </div>

  <div class="w-96 h-96 bg-yellow-400 flex items-center justify-center md:justify-start">
    <img class="object-contain" src="../static/pics/gif.gif">
  </div>


</div>