How to: Create Panels with matching Heights

Flexbox & History#

One of the best ways to achieve a row of boxes which match in their heights is with an up-and-coming feature called flexbox. This is particularly important when presenting dynamic content, if you’re using pre-selected, static content then often the best approach to take is just to add a min-height within the CSS for the columns. As soon as the content extends a min-height however they will escape and have differing heights.

The Flexbox model has been a recent CSS development but has gone through noticeable developments, initially proposed in 2008 (with display: box;)and then further refined in 2011 and 2012 (with display: flexbox;) it is only now beginning to become more main-stream (with display: flex;). The initial release specification for the flexbox model was based on the XUL implementation and became known as ‘Flexbox 2009’. This initial syntax changed dramatically later, becoming the ‘tweener’ and then later became the syntax we’re familiar with in modern browsers today.

How to Use#

This can be implemented simply by using the correct HTML structed and adding a CSS snippet.

HTML

<div class="grid">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

CSS

/* Flexbox Container */
div.grid {
    display: flex;
}

View Demo

So what’s the problem?#

Well, because the flexbox model is a recent development and has been changed, it’s browser support for the accepted syntax is relatively low and is often ill-advised to use – somewhat depending on your own audience. This is shown on caniuse, with only 60% support for the unprefixed version globally (Aug 2014). According to html5please.com, however, it’s okay to use in your project. So if IE9 support is important to you, you should turn to either setting a min-height or using some JavaScript to set the height of the elements.

Hybrid

One solution is to use the flexbox approach but to provide a JS fallback if it’s not supported. It’s possible to detect if a browser supports the flex display property with an answer taken from StackOverflow. All that would be necessary would be to replace the code if the flex box was not supported.

// detect CSS display:flex support in JavaScript
var detector = document.createElement("detect");
detector.style.display = "flex";
if (detector.style.display === "flex") {
    console.log("Flex is supported");
}
else
{
    console.log("Flex is not supported");
}

Further Reading#

There are plenty of great resources on this subject, probably due to it’s once controversial nature. CSS-Tricks has a complete article on the subject, DesignKaram also covered the subject and used conditional classes (with modernizr) to provide a fallback.