How to Create Responsive Columns of Equal Vertical Height with Flexbox CSS

More videos
Views Member

How to Create Responsive Vertical Columns
of Equal Height with Flexbox CSS

This video is an in-depth discussion about responsive HTML and CSS column equal height issues. In the video, the focus is on vertical height issues with responsive columns. I take a look at the most common way of creating responsive columns and demonstrate the issues associated with the vertical height display and offer a quick and easy way to address the vertical column equal height issue by using a CSS3 flex display property.

Find out where your website ranks with your chosen keywords in Google, Yahoo and Bing.
14 day free trial. No credit card required.

Flexbox is more than just a solution for vertical column equal height. Flexbox is a flexible box model for laying out websites.

Premium WooCommerce Extensions, WordPress Plugins & Themes Only $10 or Free with Membership

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container’s margins collapse with the margins of its contents. source

Premium WooCommerce Extensions, WordPress Plugins & Themes Only $10 or Free with Membership

Recommended Responsive Design Courses

Flexbox, media queries, grids all covered.
Take your HTML & CSS skills to the next level by creating responsive websites!

Mobile First & Responsive Web Design: Build modern websites!


Code Snippets for Flexbox Video
Code Pen: HTML and CSS markup for vertical columns using Flexbox Morten Rand-Hendriksen’s in-depth video discussion about Flexbox Old fashioned hard way to create responsive vertical columns with equal height



  • Steven M Veltkamp

    Have a problem with scrolling pages – when the center column contents are longer and the page can be scrolled down, the side columns (left and right) do not extend down in Chrome/Chromium browser
    You can see what I mean on my website – as I’ve not found a fix for it

  • mrthappy

    really exciting video on flexbox ,however have to ask , how could you acquire the position of the three boxes including the links , when this element is in an flex container .thank u..
    i have been trying to build a layout but am having problem with position elements in a flexed container

Share your thoughts!