Есть ли ошибка в реализации WebKit/Blink гибкого потока flexbox: обертка столбца?

Question

Это ошибка в WebKit/Blink?

Я пытаюсь внедрить сводную страницу статьи, аналогичной газеты: сводки статьи стекать вниз и «обертка» слева направо, точно так, как указано в разделах the W3 specificationflex-direction и flex-wrap. Остальное пространство в столбце должно быть равномерно распределено между блоками, которые его занимают (точно так же, как flex-grow: 1).

См. the JSFiddle.

Возможно, Firefox реализовал это правильно, но у меня очень странный макет из Chrome и Safari.

Если это действительно ошибка, есть ли обходной путь?

Firefox:

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>