WebKit/Blink 对 flexbox 的 flex-flow: column wrap 的实现是否存在错误？

Question

这是 WebKit/Blink 中的错误吗？

我正在尝试实现类似于报纸的文章摘要页面：文章摘要从左到右向下 'wrap'，完全按照 flex-direction 和 [= the W3 specification 的 12=] 部分。列中剩余的 space 应该在占据它的块之间重新平均分配（就像 flex-grow: 1）。

参见the JSFiddle。

Firefox 似乎已经正确实现了这一点，但我从 Chrome 和 Safari 得到了一个非常奇怪的布局。

如果这确实是一个错误，是否有解决方法？

火狐：

Chrome/Safari:

Answer 1

如果将 max-height: 24rem 更改为 height: 24rem;，则它适用于 Chrome。

貌似Chrome是根据最小块计算高度的

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>

WebKit/Blink 对 flexbox 的 flex-flow: column wrap 的实现是否存在错误？

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

webkit

flexbox

gecko

blink