FlexBox doesn't work with iPhone 6 - ios

Question

Having very weird problem with FlexBox testing on a iPhone6.
On iPhone6 the FlexBox elements are not shown at all. As I understand they are hidden beneath each other.
As I don't own such device - I can't test it... I've used some online browser testers with trial subscription.
I've made this jsFiddle:
.flex-container {
display:-webkit-box;
display:flex;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap:wrap;
-ms-flex-wrap: wrap;
text-align:center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
}
.flex-container .item h2{
font-size: 1.1em;
font-weight: 300;
}
.flex-container>div {
-webkit-box-flex: 0;
-ms-flex: 0 1 50%;
flex: 0 1 50%;
-webkit-box-sizing:border-box;
box-sizing:border-box;
max-width: 50%;
}
.flex-container .item:first-child {
background: #986a4b;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: left;
}
.flex-container .item.third, .flex-container .item.third article{
background: #fff;
color:#986a4b;
}
.flex-container .item:nth-child(4) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
/*IE11*/
.flex-container .item .first{height: /*100%;*/ auto; min-height: 1px;}
.flex-container .item img {
width: 100%;
}
.flex-container .item:not(img){
padding: 1em;
}
.flex-container .item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
color: #fff;
font-size: 0.9em;
}
.flex-container .item {
background: #fff;
}
.flex-container .margin{padding:60px;}
.flex-container article {
color: #9f6a4a;
}
#media screen and (max-width: 1000px){
.flex-container .item .box .inner{font-size:1.5em;}
.flex-container .item{-webkit-box-flex:1;-ms-flex:1 0 100%;flex:1 0 100%;}
}
#media screen and (max-width: 600px){
.flex-container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
Through a browserstack it seems to work well.
But on my live website it doesn't... The code is the same. I really don't understand how to fix it.. Already used such hacks such as min-height: 1px but no luck...

Answer 1

replaced dispaly: flex;
with display: -webkit-flex
solved it for me

Answer 2

Could be resolved in two ways:
1). shorthand: flex: 1 1;
2). -webkit-flex: 1 1 100%;