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

【问题标题】：Is there a bug in WebKit/Blink's implementation of flexbox's flex-flow: column wrap?WebKit/Blink 的 flexbox 的 flex-flow: column wrap 的实现中是否存在错误？
【发布时间】：2015-04-03 00:17:21
【问题描述】：

这是 WebKit/Blink 中的错误吗？

我正在尝试实现类似于报纸的文章摘要页面：文章摘要向下流动并从左到右“换行”，完全按照the W3 specification 的flex-direction 和flex-wrap 部分中的指定.列中的剩余空间应该在占据它的块之间平均重新分配（就像flex-grow: 1）。

见the JSFiddle。

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

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

火狐：

Chrome/Safari：

【问题讨论】：

标签： webkit flexbox gecko blink

【解决方案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>

【讨论】：

我知道这不在最初的问题中，但是 jsfiddle.net/4cq6z2j2 呢？如果高度应该由内容决定，那又如何呢？ WebKit 失败时 Firefox 仍能正确呈现。
我用这个小提琴替换了我的答案，我认为这得到了你想要的。这里也是链接：jsfiddle.net/4cq6z2j2/4
没关系，我的新答案和原来的答案基本一样。
它仍然回答了我的问题，所以谢谢！当我进行更多探索时，我会提交一个新问题并可能会提交一个错误。
酷，很高兴我能帮上忙！