Почему не работает flex wrap на iOS?

Question

[MrGaunt]

Здравствуйте.

Есть несколько рядов карточек (по 3 карточки в каждом ряду) и в зависимости от размера окна браузера ряды сужаются с помощью flex-wrap: wrap и min-width, а карточек в ряду становится 2 или 1. Однако flex-wrap: wrap отказывается работать на iOS-устройствах (в частности, на iPad вне зависимости от браузера) и в результате получаются все карточки в одну колонку вместо целых рядов по 2 карточки.

Когда же использую flex-wrap: nowrap то всё отображается надлежащим образом (то есть flexbox работает, но этот способ мне не подходит).

Уже прописал казалось-бы все префиксы, но результат по-прежнему неудовлетворительный. Как решить проблему?

Пример для наглядности на JSfiddle.

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
flex-flow: row wrap;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;	

-webkit-box-orient: horizontal; 
-webkit-box-direction: normal; 
-webkit-flex-direction: row; 
-ms-flex-direction: row; 
flex-direction: row;

Answer 1

[Андрей Верх]

для детейflex:0 1 50%задайте

Comments

[MrGaunt]

Огромное спасибо!

[Юрий Янин]

А можно без фразы "Для детей" объяснить почему на ios так происходит и почему там необходимо дописывать такое свойство?

[GooDay2Die]

Юрий Янин, Имелось ввиду не то что вы дети, а child Dom element...