Search code examples
webkitflexboxgeckoblink

Is there a bug in WebKit/Blink's implementation of flexbox's flex-flow: column wrap?

Is this a bug in WebKit/Blink?

I'm trying to implement an article summary page similar to that of a newspaper: article summaries flow down and 'wrap' from left to right, exactly as specified in the flex-direction and flex-wrap sections of the W3 specification. The remaining space in a column should be redistributed evenly between the blocks that occupy it (just like flex-grow: 1).

See the JSFiddle.

Firefox appears to have implemented this correctly, but I get a very strange layout from Chrome and Safari.

If this is indeed a bug, is there a workaround?

Firefox:

Firefox

Chrome/Safari:

Chrome/Safari

Solution

  • If you change max-height: 24rem to height: 24rem; then it works in Chrome.

    It looks like Chrome is calculating the height based on the smallest block.

    body {
  background: #C6C2B6;
}

section {
  background: white;
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  height: 24rem;
}

article {
  background: #48929B;
  flex: 1 0 auto;
  min-height: 10rem;
  width: 4rem;
  margin: 0.5rem;
}

.big {
  min-height: 14rem;
}
    <section>
  <article></article>
  <article></article>
  <article class="big"></article>
  <article></article>
</section>