Same height columns with Flexbox

2016-06-11

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.