Why doesn't flex wrap work on iOS?

Question

css

Hello.
There are several rows of cards (3 cards in each row) and, depending on the size of the browser window, the rows are narrowed with flex-wrap: wrapand min-width, and the cards in a row becomes 2 or 1. However, it flex-wrap: wraprefuses to work on iOS devices (in particular, on the iPad, regardless of browser) and the result is all the cards in one column instead of whole rows of 2 cards.
When I use flex-wrap: nowrapit, everything is displayed properly (that is, flexbox works, but this method does not suit me).
It would seem that I have already registered all the prefixes, but the result is still unsatisfactory. How to solve the problem?
An example for clarity on 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%set for children