Equal Height Flexbox Columns in Chrome

Equal height Flexbox columns in Chrome

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>

Nested flexbox equal height columns broken in Google Chrome

Checkout my codepen: http://codepen.io/slawaEremin/pen/wBGBrj

The main idea is to use display: flex for the direct child (.l-sidebar) of the parent block (.l-container) and to use flex-basis: 100% instead of height: 100% in .l-sidebar-inner because Chrome doesn't understand the height: 100%;

.l-sidebar {
  display: flex;
}
.l-sidebar-inner {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Equal-height nested flexbox columns

What's going on here?

Your .flex-col is not a flex-container, it is just a flex-item. Then you use a flex-container inside that flex-item, which is working as expected, it fills the height of its own content.

---

What's the best way to achieve the look I want, without setting a
fixed height or sacrificing my gutters or my nesting?

You need to make your flex-item a flex-container as well.

.box {  background-color: blue;}.flex-col.list {  background-color: lightblue;}.flex-container {  display: flex;  flex-direction: row;  -webkit-flex-direction: row;  flex-wrap: wrap;  -webkit-flex-wrap: wrap;  margin-left: -1em;}.flex-col {  -webkit-flex: 1;  flex: 1;  margin-left: 1em;}.flex-col.flex-container {  margin-left: 0;}

<div>  <div class="flex-container">    <div class="flex-col">      <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tortor metus, ultrices ut egestas eget, lacinia ut tellus. Duis consectetur velit ut aliquam convallis. Donec erat ex, interdum et justo in, varius pharetra nunc. Integer rutrum, ante        nec gravida scelerisque, urna massa convallis enim, et tincidunt leo odio eget nisl. Ut et blandit velit, ac tristique massa. Integer leo mi, tincidunt in bibendum eu, blandit eget est. Cras convallis elit id urna convallis euismod.</div>    </div>    <div class="flex-col flex-container">      <div class="flex-col list">Content</div>      <div class="flex-col list">Content</div>    </div>  </div></div>

Make flex child equal height of parent inside of grid column

Add flex-grow : 1; to your .card rule. HTML markup is fine.

.row {
  display: flex; 
  flex-flow: row wrap; 
  background: #00e1ff;
  margin: -8px;
}
.col { 
  display: flex; 
  flex: 1 0 400px;
  flex-flow: column; 
  margin: 10px;
  background: grey;
}
.card {
  display: flex;
  padding: 20px;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
  flex-grow: 1;
}

You may also look at Foundation 6 Equalizer plugin. They use JavaScript though.

Equal height rows in a flex container

The answer is NO.

The reason is provided in the flexbox specification:

6. Flex Lines

In a multi-line flex container, the cross size of each line is the minimum size necessary to contain the flex items on the line.

In other words, when there are multiple lines in a row-based flex container, the height of each line (the "cross size") is the minimum height necessary to contain the flex items on the line.

Equal height rows, however, are possible in CSS Grid Layout:

• Equal height rows in CSS Grid Layout

Otherwise, consider a JavaScript alternative.

Equal height columns in Firefox (CSS)

the cells are here drawing the columns. border-spacing can be used to set some area around .

#env {  display: table;  width: 100%;  border-collapse: separate;  border-spacing: 30px 5px;}
.container {  display: table-cell;  width: 33.33333%;  background: red;  border-radius: 3px;  vertical-align: top;}
.content {}
p {  padding: 0 20px;}

<section id="env">  <div class="container">    <div class="content">      <p>        Way more content than in all the others because this one has so much to say and doesn't know when to stop...it always does that...      </p>    </div>  </div>  <div class="container">    <div class="content">      <p>        Content 2      </p>    </div>  </div>  <div class="container">    <div class="content">      <p>        Content 3      </p>    </div>  </div></section>

---

Related Topics