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;    
   }
  }

通過瀏覽器堆棧，它似乎運行良好。 但是在我的實時網站上它沒有...代碼是相同的。 我真的不明白如何修復它.. 已經使用了諸如min-height: 1px類的黑客但沒有運氣......

Answer 1

可以通過兩種方式解決：1）。 簡寫： flex: 1 1; 2）。 -webkit-flex: 1 1 100%;

Answer 2

替換顯示：flex； 帶顯示：-webkit-flex

為我解決了

Answer 3

您必須添加...

顯示：-webkit-flex;

在你的CSS。