Same height columns with Flexbox


How to create columns with an equal height instead of having the height dictated by the column content.

The problem

See the Pen Height column issue by Jonathan klughertz (@klugjo) on CodePen.

We want all columns to be of the same height.

In this example, we have 3 divs with float: left; and a fixed width.

Flexbox to the rescue

Simply remove the float: left; and put all the divs inside another div with display: flex;. It is as simple as that.

See the Pen Height Column Fix by Jonathan klughertz (@klugjo) on CodePen.