CODEWITHSUNDEEP
cssflexbox
molgin
molgin

Reputation: 83

Equal-height nested flexbox columns

I have a flexbox container that has two columns, and the second column contains another flexbox container with two columns. I want the two nested columns to be the same height as the column that contains them, which is the same height as the other outer column.

Essentially, I want it to look like three equal-height columns with a gutter between them, like so:

three equal-height columns

I've made this work in JSFiddle and CodePen by setting the height of the inner flexbox container to 100%.

The HTML:

<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">
      <div class="flex-container list-container">
        <div class="flex-col list">Content</div>
        <div class="flex-col list">Content</div>
      </div>
    </div>
  </div>
</div>

And CSS:

.box {
  background-color: blue;
}

.list-container {
  height: 100%;
}

.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;
}

But here's the weird part: On Chrome, it seems to only work on these sites, and it doesn't work at all in Safari. If I open the JSFiddle or CodePen links in Safari, the two right columns appear collapsed to their content. Meanwhile, if I paste the same code into an HTML file and open it in either Chrome or Safari, the two right columns appear stretched to the viewport height. Both the file and the JSFiddle/CodePen links work fine in Firefox, however.

So my questions are:

  1. What's going on here?
  2. What's the best way to achieve the look I want, without setting a fixed height or sacrificing my gutters or my nesting?

Upvotes: 1

Views: 1317

Answers (1)

Ricky Ruiz
Ricky Ruiz

Reputation: 26791

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>

Upvotes: 1

Related Questions