FlexBox 不适用于 iPhone 6

Question

FlexBox 在 iPhone6 上进行测试时出现非常奇怪的问题。在 iPhone6 上，FlexBox 元素根本不显示。据我了解，它们隐藏在彼此之下。
因为我没有这样的设备 - 我无法测试它......我已经使用了一些在线浏览器测试器试用订阅。我做了这个 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;    
   }
  }

通过 browserstack 它似乎运行良好。但是在我的 live website 上却没有...代码是一样的。我真的不明白如何解决它。已经使用了诸如 min-height: 1px 之类的技巧，但运气不好...

Answer 1

可以通过两种方式解决： 1). shorthand: flex: 1 1; 2). -webkit-flex: 1 1 100%;

Answer 2

替换了显示：flex； 显示：-webkit-flex

帮我解决了

FlexBox 不适用于 iPhone 6

FlexBox doesn't work with iPhone 6

css

iphone

mobile-safari

ios

flexbox