Flexbox Equal Height Columns

By  on  

Flexbox was supposed to be the pot of gold at the long, long rainbow of insufficient CSS layout techniques.  And the only disappointment I've experienced with flexbox is that browser vendors took so long to implement it.  I can't also claim to have pushed flexbox's limits, but the technique has allowed me to accomplish a few tasks which were overly complicated in the past.  One task was easily mastering vertical centering with flexbox.

My next task was creating a responsive two-column layout with columns of equal width, equal height, and fixed-pixel margin between them, as well as any amount of padding.  It was appallingly easy...and that's why I love flexbox!

The HTML

The markup requires one parent and two child elements:

<div class="flexbox-container">
	<div><h3>Column 1</h3></div>
	<div><h3>Column 2</h3></div>
</div>

The content in each column can be any height -- that's not important here.

The CSS

The CSS is also incredibly easy and brief:

.flexbox-container {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
}

.flexbox-container > div {
	width: 50%;
	padding: 10px;
}

.flexbox-container > div:first-child {
	margin-right: 20px;
}

Simply set the display to flexbox on the parent and then give each child 50% width.  What's sweet about flexbox is you can add padding, border, and margin to the child elements without needing to worry about a column spilling over to the next row.

I was super excited when I learned about CSS calc because I wanted to shim what flexbox does today, but now that flexbox is supported by just about every modern browser, I don't need CSS calc for layouts.  Excellent!  I'm so glad that flexbox is here -- tasks that should be are easy now!

Recent Features

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • By
    Fancy Navigation with MooTools JavaScript

    Navigation menus are traditionally boring, right? Most of the time the navigation menu consists of some imagery with a corresponding mouseover image. Where's the originality? I've created a fancy navigation menu that highlights navigation items and creates a chain effect. The XHTML Just some simple...

  • By
    Create Keyboard Shortcuts with Mousetrap

    Some of the finest parts of web apps are hidden in the little things.  These "small details" can often add up to big, big gains.  One of those small gains can be found in keyboard shortcuts.  Awesome web apps like Gmail and GitHub use loads of...

Discussion

  1. Flexbox : so great and so easy to use. Wonderful !

  2. Ahh, this is helpful! Awesome and marvelous explanation

  3. That is really useful! I recently started doing web development and had to do just this.

  4. Tune

    Nice, but the height is now fixed at 200px. How can I achieve equal height of both divs without knowing the contents of each div on beforehand? (f.i. user generated content) (Currently I solved it with JS, but I hope to find a pure CSS solution)

    • John

      Just remove the fixed min-height of the example and you’ll see that the two columns remain of equal height.

  5. Thanks for the post, I am going to start using this a lot now.

  6. Adam

    Already using it almost everywhere I can. Syntax is also really easy to remember. Easy and powerful.

  7. Thanks for the post, it once more shows that flexbox layout is a viable option these days.

    However, when I built a responsive website for a streaming provider lately, I stumbled upon some incompatibilities concerning older Android smartphones, especially with Android’s system browser:

    While flexbox would have been great, considering one of the design requirements was a multi column layout, it unfortunately didn’t work out on every device, so I had to use

    display: inline-block;

    in conjunction with Modernizr to get the layout to at least work somehow on older smartphones. I consider this kind of a stumbling block, seeing that – at least here in Germany – older Android smartphones are still around.

    • I just ban those browsers (and show a “please upgrade” message) using UA matching.

  8. Mephysto

    Awesome!
    When can we use it? (Hint: it’s when we can drop support for IE9. Which is at least 5 more years away). Or I am missing some awesome polyfill which automagically replaces it to clearfix and floats or something.

  9. shirahara

    How about just using the columns property?
    https://developer.mozilla.org/en-US/docs/Web/CSS/columns

    .foo {
        columns: 2;
        column-gap: 20px;
    }
    
  10. MJR

    Flexbox is a good concept but still has a way to go due to browser issues and other niggly problems. IE isn’t fully compatible with the other browsers and needs quirky CSS code to make it conform. Animated sprites don’t work properly in any of the browsers just now. Check out https://github.com/philipwalton/flexbugs/issues/ for more information.

  11. Simple and elegant solution for flex two col layout. I tried several methods but I over complicated things. Thanks to this post I found the answer I was looking for. Good One.

  12. Jan

    How do I add vertical lines between the columns to visual separate them ?

    • Add a border-left to the second column DIV

  13. Mahesh Waghmare

    But, What for 3 divs. Can we create 50% column grid for 3 or more flex items using flex parent.

  14. Craig

    Thanks for the blog post David! I always find your posts to be helpful and informative.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!