Flex items don't break on new lines and cause overflow in IOS 9.0

Question

It works in other browsers but not in Safari. I need that flex items take the whole width on screens below 768px. They take the whole width of their container but they stay in the same line and I need each item on its own line. wrap is the value of flex-wrap which display elements in a new lines when there isn't enough space in the main axis, is not working on Safari 9.0 and I would like to know why is that happening. If each element is 100% wide then there isn't enough space for 2 elements and new lines should be created.

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.flex-item{
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    flex: 1 0 0%;
}

@media screen and (min-width: 768px){
   .flex-item{
      min-width: 0;
   }
}

<div class="flex-container">
    <div class="flex-item" style="background-color: red">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, perferendis! Excepturi beatae sequi ipsum, temporibus obcaecati reprehenderit dolore expedita nisi facere alias optio maiores recusandae unde! Voluptas minus atque adipisci!</p>
    </div>
    <div class="flex-item" style="background-color: orange">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam, corrupti eaque quos recusandae molestias provident voluptate obcaecati consequuntur quasi perspiciatis nam fugit quibusdam deleniti sit enim adipisci repellendus? Eum, nisi.</p>
    </div>
</div>

Here below is how my example look like on chrome

And here is how my example look like on Iphone (Safari 9.0)

Answer 1

It seems like there is some sort of bug in safari, try using

display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;