Equal Height Columns in a Row using Flex Box

Table Of Contents

In this tutorial I'll be showcasing how we can achieve equal heights on our columns using the CSS and HTML. More specifically I'll be demonstrating the Flex Box feature of CSS which allows us to create these equal height columns without resorting to a nasty javascript workaround.

Flex CSS

.list{
    display: flex;
    flex-wrap: wrap;
}

.list-item{
    background-color: #eee;
     display: flex;
    color: white;
}
.list-content{
    padding: 1.5em;   
}

So how does this work? In our .list class we use display: flex; which initiates flexbox for the outer element. In order for our inner-elements to all have the same height, we have to use display:flex; once again in our .list-item css class.

The Code

See the Pen epOxWM by Elliot Forbes (@emforce) on CodePen.