WebKit / Blink实现flexbox的flex-flow是否存在错误：列包装？

Question

这是WebKit / Blink中的错误吗？

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

请参阅 the JSFiddle 。

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

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

火狐：

铬/ Safari浏览器：

Answer 1

如果您将max-height: 24rem更改为height: 24rem;，则可以在Chrome中使用。

看起来Chrome正在根据最小的块来计算高度。

＆＃13;

＆＃13;

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

＆＃13;

<section>
  <article></article>
  <article></article>
  <article class="big"></article>
  <article></article>
</section>

＆＃13;

＆＃13;

＆＃13;