Есть ли ошибка в реализации WebKit/Blink flex-flow flex-flow: перенос столбцов?

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

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

См. JSFiddle.

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

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

Fire Fox:

Firefox

Хром/Сафари:

Chrome/Safari


flexbox webkit gecko blink
person Will    schedule 03.04.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если вы измените 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>

person ratherblue    schedule 03.04.2015
comment
Я знаю, что этого не было в исходном вопросе, но как насчет jsfiddle.net/4cq6z2j2? Если высота должна определяться содержимым, то что? Firefox по-прежнему отображается правильно, хотя WebKit дает сбой. - person Will; 03.04.2015
comment
Я заменил свой ответ этой скрипкой, и я думаю, что это дает то, что вы хотите. Вот ссылка: jsfiddle.net/4cq6z2j2/4 - person ratherblue; 03.04.2015
comment
Неважно, мой новый ответ в основном такой же, как и исходный ответ. - person ratherblue; 03.04.2015
comment
Это все еще ответило на мой вопрос, так что спасибо! Я отправлю новый вопрос и, возможно, сообщу об ошибке, когда проведу дополнительное исследование. - person Will; 03.04.2015
comment
Круто, рад, что смог помочь! - person ratherblue; 03.04.2015