Tip #11: Push elements to the bottom of their containers with flex-grow

Picture this: you're working on a price table section that uses cards and each card has a different length list of features and a call-to-action button to purchase the plan below the list, you find that after implementing all the content, the section looks something like this:

In designs like this, we typically want the "buy now" buttons to be aligned with one another. There's just one problem: the left price table has less features than the right price table so the button floats up a little higher on the left than the right despite both price tables being the same height (notice the borders are the same between the two!)

There's a super simple fix to all this and it involves a quirky flex-box trick. We're gonna use something called flex-grow.

I wrote tip the other day that involves using flex-grow to build layouts and the concept is similar here, what we want to do is push the button all the way to the bottom of the price table by letting the features list take up the full, remaining height of the table.

To do this in TailwindCSS, we need to do two things:

1. We need to add flex flex-col to the price table div
2. We need to add flex-1 to the ul that contains the features list.

Something like this:

<div class="border-gray-300 border rounded-lg p-6 space-y-4 flex flex-col">
    // ...
    <ul class="divide-y divide-gray-300/30">
        <li class="text-small font-medium py-1">✅ Feature One</li>
        <li class="text-small font-medium py-1">✅ Feature Two</li>
        <li class="text-small font-medium py-1">✅ Feature Three</li>
    </ul>
    // ...
</div>

Adding flex flex-col to the outermost div allows for the inner flex-1 to expand its height up to the available limit. In TailwindCSS, flex-1 is a shorthand for applying the following CSS properties:

.flex-1 {
	flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%
}

In essence, flex-grow: 1; and flex-shrink: 1; just tell flex-box that whatever element is using these two properties, make it take up 100% of the available width (assuming no other sibling elements are in the flex container). You can think of 1 here as being 1/1. By the way flex-basis also defines a default width but it's being unset here (as it gets overwritten anyways by flex-grow and flex-shrink)

When other children are present in the flex container (like in this example), it gets little more complicated but just remember that, by default, everything in a flex container will take up whatever its natural width and height are. Once you define an element to have flex-1 in a flex container, flex-box will allocate as much possible space to that element while retaining the natural widths and heights of the surrounding, sibling elements.

That's why adding flex-1 to the features list works to push down the button content (keep in mind that flex-1 works in both the x and y directions depending on if you're using flex-row or flex-col).

Here's the final fix: