CSS: A Simple Trick to Prevent Stretching of the Last Flexbox Element

Shuqi Khor
2 min readMar 17, 2023

--

Since the introduction of Flexbox in CSS, it has become so ubiquitous that you could find it in almost every website.

However, Flexbox doesn’t always behave as expected. For example, once you allow your child element to stretch by giving flex-grow a positive value, the last row always stretches end to end, and it may look awkward when it has less elements than other rows:

Solution: Fill It Up with Spacers

The easiest trick to solve this, is to append a bunch of empty spacers with the same css properties as other boxes, but with 0 height and 0 vertical margins:

In the case above, our container width is fixed, so 2 spacing boxes are enough. If your container is fluid, just place more spacers. You could theoretically append 100s of them in it and it will be fine!

The Caveat: Gaps

The catch is, once you applied gap, or row-gap to your Flexbox container, the spacers will leave a bunch of bottom paddings in the container:

Example: 3 rows of bottom gaps appeared due to the 10 spacers in this grid

There’s no fix to this though, not even negative margins. Hence, for this trick to work, the gaps could only be added by applying margins to the content (as shown in the codes above).

The Proper Solution: Grid

If you know Flexbox, I bet you must have heard of CSS Grid as well.

To put it simply, Flexbox is mainly designed to handle a single row of elements, while Grid is designed for multiple rows.

Therefore, the proper way to lay a grid layout (no pun intended) is to use CSS Grid instead of Flexbox:

There you go, a grid that automatically wraps and stretches its child elements while they stay intact to the grid lines.

If it looks confusing to you, don’t forget to check out these 2 CSS-Tricks pages that I use all the time as my reference:

Have fun!

--

--