html - Equal height Flexbox columns in Chrome

Question

I have a simple, 2-column layout and I'd 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 is working in Firefox but not in Chrome: here's a Fiddle

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

Answer 1

To create two equal columns using Flexbox:

• The parent container gets display: flex

• Each column is created by a div and they get flex: 1 to grow / shrink

To stretch the child of the first column:

• The first column is also given display: flex so that its children can have flex properties and grow

• The aside child is given flex: 1 and will grow / shrink

This is the easiest guide to Flexbox you could ask for.

Flexbox Compatibility: IE11+ and all modern browsers.

Example

---

With Bootstrap: Here is the fiddle from your comment with my changes added. The 1px gap on the left has been removed with div.flex.row:before, div.flex.row:after { display: none }

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

---

I have stripped all unnecessary classes for this example. Currently, both column heights are determined by the tallest column. You could also have the columns fill in the entire height of the page with height: 100vh on the flex container — read more about viewport units here.

Viewport Units Compatibility: Viewport Units are almost well supported.

To give a column a larger width, give it a larger flex value. I have 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>