Flexbox Equal-Height Columns in Chrome

Question

I have a simple, two-column layout, and I would like to use Flexbox to get equal heights:

HTML

<div class="row flex"> <!-- menu --> <div class="col-xs-4"> <aside> Menu goes here </aside> </div> <!-- content --> <div class="col-xs-8"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac elementum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus nec elementum erat. Suspendisse consequat ut metus ut cursus. Aenean et lectus id libero venenatis varius. Vivamus luctus ligula sit amet faucibus vulputate. Vestibulum tincidunt fringilla mauris, a vulputate magna egestas nec. Vivamus a odio ut nibh viverra fermentum.</p> </div> </div> 

CSS

 body { color: red; } .flex { display: flex; } aside { background: #000; height: 100%; } 

This works in Firefox but not in Chrome: here is Fiddle

I tried something (including vendor prefixes), but it still doesn't work.

Answer 1

To create two equal columns using Flexbox :

• Parent container gets display: flex

• Each column is created by a div, and they get flex: 1 for increase / compression

To stretch a child of the first column:

• The first column also indicates display: flex , so that its children can have flexibility and grow

• The deferred child is given flex: 1 and will grow / contract

This is the easiest Flexbox guide you could ask for.

Flexbox Compatibility: IE11 + and all modern browsers .

Example

---

From Bootstrap : Here is the fiddle from your comment with the changes added. The 1px gap to the left was removed using div.flex.row:before, div.flex.row:after { display: none }

Corresponding answer: Remove 1px gap when using display: flex in Chrome

---

In this example, I have separated all unnecessary classes. Currently, both column heights are determined by the highest column. You can also fill columns at full page height with height: 100vh on a flexible container - read more about view units.

Viewport components: Viewport units are practically supported .

To give a column a wider width, give it a greater value of flexibility. I changed the second column in this example to flex: 3 and it will be wider.

 body { color: red; margin: 0; } .flex { display: flex; /*Should the columns span the entire height of the page? Use: height: 100vh;*/ } .column { flex: 1; } .column:first-child { display: flex; } .column:last-of-type { background: #000; flex: 3; } aside { flex: 1; background: #F90; } 

 <div class="flex"> <!-- menu --> <div class="column"> <aside> Menu goes here </aside> </div> <!-- content --> <div class="column"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac elementum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus nec elementum erat. Suspendisse consequat ut metus ut cursus. Aenean et lectus id libero venenatis varius. Vivamus luctus ligula sit amet faucibus vulputate. Vestibulum tincidunt fringilla mauris, a vulputate magna egestas nec. Vivamus a odio ut nibh viverra fermentum.</p> <p>Nulla facilisi. Pellentesque nec libero leo. Duis porta ut neque vulputate blandit. In vel quam eu eros finibus feugiat ut in nulla. Morbi congue, tellus commodo euismod pulvinar, lacus dui fringilla lectus, in tempus mi nulla semper ex. Integer feugiat, lectus a facilisis rutrum, ex magna tincidunt ligula, in suscipit turpis lorem quis neque. Suspendisse dictum, nulla at aliquet cursus, magna tellus mattis purus, nec volutpat mauris nunc non neque. Mauris pretium mauris sed eros interdum lobortis. Aenean id vestibulum nisl. Praesent sit amet tempor nulla, consequat viverra ante. Maecenas eu pretium lacus, a consectetur sem. Proin viverra eget turpis eu condimentum. Donec et egestas enim. Maecenas fermentum auctor ligula, nec fringilla mi. Quisque hendrerit purus eget urna semper sodales.</p> </div> </div> 

Answer 2

Here is my solution with a bit of Modernizr and jQuery (with Equalize plugin )

http://jsfiddle.net/0Leymgbe/1/

And here is what makes it work:

 if ($().equalize) { // check if plugin is loaded $(window).on("resize", function () { (Modernizr.mq("(min-width: 768px)")) // if it tablet or desktop... ? $('.row').equalize({reset: true}) // then equalize the columns : $('.row > div').css({'height': 'auto'}); //else reset to original height }).resize(); // trigger the resize on page load, too } 

When resizing the window (and when loading it) Modernizr checks to see if the viewing window exceeds 768 pixels (tablets and desktops): if true, then jQuery aligns the columns; if false (smartphones), the original heights are restored

No (for me) to just work with CSS3 flexbox