Using flex-grow to Pin an Element to the Bottom of a Container

I have previously written a post about a guide that aims to cover the topic of Flexbox. There’s a feature mentioned there briefly, and it’s very useful when creating such a grid or another. Let me give a brief introduction before we continue – on almost every website I develop, there is a usage of a kind of grid where the grid elements have the same height (see the example below).

Everything is fine and works nicely until the moment the client wants to add text of varying lengths to each of the elements. After all, the desire and the demand to do so are entirely logical. One solution to this issue is to set a limit on the number of words or letters that will be displayed in each element, as shown in the following example:

What’s the problem with this?

This approach is quite limiting, as you can understand. If the client wants a different amount of text in the elements or, let’s say, they want to add an image to one of the elements, then even though their heights will remain the same due to Flexbox, we’ll reach a situation where elements like buttons at the bottom won’t be aligned properly between the Flex Items, as shown in the following example:

Flexbox provides an excellent solution to these cases, so we don’t have to cut the text, limit the number of words, and prevent the client from deciding on the content. The client will be able to insert any content they want into the elements, and our button will remain attached at the bottom.

Flex Containers calculate the available space within them and give us much greater flexibility to manipulate the content. Using Flexbox and the flex-grow property, we can easily create the following effect:

I’m talking about how the button stays attached at the bottom no matter what content is placed within such an element or another. It might sound trivial, but I’ve encountered many developers who aren’t familiar with this method and use outdated techniques such as absolute positioning, the min-height property, and the like.

In the comments, it was suggested that you can achieve this by adding margin-top: auto to the button. However, let’s see how to do this using Flexbox…

The Solution – Using flex-grow

The solution, as I mentioned, is using the `flex-grow` property (I’ll write more about it in the future). Let’s see step by step how we arrive at the last example I presented:

Step 1 – Writing the Markup

I created a basic container that contains several elements, each of which contains additional elements like a title, an image, some text, and a button.

<div class="flex-alignment">
    <div>
        <h2>Title</h2>
        <p>Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius semper odio, id ornare est facilisis at. Nullam ac libero nec dui dignissim malesuada.</p>
        <a href="">Button</a>
    </div>
    <div>
        <h2>Title</h2>
        <p>Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac libero nec dui dignissim malesuada.</p>
        <a href="">Button</a>
    </div>
</div>

Step 2 – Setting It as a Flex Container

As I mentioned in a guide I wrote about Flexbox, the only thing you need to do to create a Flex Container is to add the line `display: flex` to the container that holds the elements. This allows us to control those “children” existing within that container.

.flex-alignment {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

These “children” are the two <div>elements inside the container with the class .flex-alignment in the Markup I presented in the previous section.

Step 3 – Making the Elements Inside the Container Flex Containers Themselves

We added the display: flex property to each of the elements within the main container so that they expand vertically and have an equal height in each row. Now we have control over the elements within each of them (the title, the image, etc.), so we can easily stick the button at the bottom:

.flex-alignment > div {
    display: flex;
    width: calc(50% - 10px);
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
}

The width property will change according to the number of elements you want to appear in the grid. By the way, here’s an interesting post about creating a responsive grid layout without media queries.

Step 4 – Making the Button Stick to the Bottom of Its Container

The flex-grow property defines a Flex Item’s ability to grow relative to the other items within the same Flex Container:

.flex-alignment p {
    flex-grow: 1;
}

In that case, we set that the <p> element, which contains the running text, will have the value flex-grow: 1, meaning it will always expand and fill all the available space for it.

Since we’re using flex-direction: column for the container along with the flex-grow: 1 property for the <p> tag, it will fill the empty space below it, pushing our button to the bottom of the container.

Do you know other methods? I’d be glad if you shared them in the comments…