Flexbox in Chrome doesn't seem to respect 'aspect ratio' padding; fine in Firefox

Question

I have a containing row that contains up to three divs. Each child div either has a background image, or just some text. As the image divs are using background-image and have no defined width/height, they have an aspect ratio set using the aspect ratio padding method (using pseudo-elements in this instance).

This seems to work perfectly in Firefox, but in Chrome the containing div doesn't seem to respect the height of the tallest div, like so:

enter image description here

For reference, I'm using Flexbox with flex-direction set to column so that, given a max-height on the containing div, the elements should wrap. Having been poking and prodding this for a few hours, I can't determine whether the culprit is an issue with flexbox, or an issue with the padding-bottom aspect ratio method (although I suspect not, given that the right-hand set of columns seems to work just fine).

Any ideas as to why this breaks out of its container in Chrome/Webkit?

For reference, here's a jsFiddle with kittens.

score 0 · Accepted Answer · answered Jun 15 '15 at 17:33

It's a Chrome bug. See this simplified snippet:

.flex {
  display: flex;
  flex-flow: column wrap;
  max-height: 200px;
  background: red;
  justify-content: space-between;
  margin: 10px 0;
}
.big, .small {
  background: blue;
  margin: 10px;
}
.big {
  height: 75px;
}
.small {
  height: 50px;
}

<div class="flex">
  <div class="small"></div>
  <div class="small"></div>
  <div class="big"></div>
  <div class="big"></div>
</div>
<div class="flex">
  <div class="big"></div>
  <div class="big"></div>
  <div class="small"></div>
  <div class="small"></div>
</div>

With max-height on the flex container, the flex items are forced to wrap into two columns.

On Chrome, each column has a different height, and the height of the flex container is the height of the last column.

This contradicts the spec, because all flex lines (columns, in this case) must have the same main size (height, in this case):

6. Flex Lines
The main size of a line is always the same as the main size of the flex container’s content box.

This bug is probably due to that first the main size of the flex container is determined, and then flex items are arranged into flex lines

9. Flex Layout Algorithm

Determine the main size of the flex container using the rules of the formatting context in which it participates.

Collect flex items into flex lines

However, according to the block layout, an auto height depends on the content. So determining it before arranging the content seems not well defined.

To fix it, I suggest using wrapping each column inside a flex item of a row flex container.

.flex {
  display: flex;
  flex-direction: row;
  background: red;
  margin: 10px 0;
}
.col {
  flex: 1;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
}
.big, .small {
  background: blue;
  margin: 10px;
}
.big {
  height: 75px;
}
.small {
  height: 50px;
}

<div class="flex">
  <div class="col">
    <div class="small"></div>
    <div class="small"></div>
  </div>
  <div class="col">
    <div class="big"></div>
    <div class="big"></div>
  </div>
</div>
<div class="flex">
  <div class="col">
    <div class="big"></div>
    <div class="big"></div>
  </div>
  <div class="col">
    <div class="small"></div>
    <div class="small"></div>
  </div>
</div>

Ugh. Thanks for the answer - at least I now know that it's a bug. Thanks for all the code too - unfortunately given the flexibility required for the layout, wrapping the child elements in columns won't be feasible. Back to the drawing board! — indextwo, Jun 15 '15 at 17:58

Flexbox in Chrome doesn't seem to respect 'aspect ratio' padding; fine in Firefox

1 Answers1