При использовании css flexbox
три основных браузера, по-видимому, ведут себя по-разному в определенных областях.
В этом случае я пытаюсь создать сетку изображений:
<div class="container">
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
</div>
.container {
display:inline-flex;
flex-flow : column wrap;
align-content : flex-start;
height : 100%;
}
В этом примере мне нужен контейнер, сам содержащий несколько элементов div
, настроенных для потока сверху вниз и обертывания, когда они достигают дна. В конечном итоге предоставил мне столбцы фотографий.
Однако мне нужно, чтобы контейнер расширялся горизонтально, чтобы разместить обернутые элементы:
Ниже приведен быстрый jsFiddle.
Поведение выглядит следующим образом:
- IE 11. Правильно, контейнер растягивается горизонтально, чтобы обернуть каждый столбец обернутых элементов.
- Firefox. Контейнер только обертывает первый столбец элементов, а остальные переполняются.
- Chrome. Контейнер всегда растягивается, чтобы заполнить ширину своего родителя, что бы это ни было.
В этом случае я хотел бы добиться поведения IE11 в двух других браузерах. Поэтому мой вопрос: как я могу контейнер flexbox
расширяться горизонтально, чтобы соответствовать его содержимому column wrap
.
Спасибо заранее.