title: FlexBox doesn't work with iPhone 6
body: <p>Having very weird problem with <strong>FlexBox</strong> testing on a <strong>iPhone6</strong>.
  On iPhone6 the FlexBox elements are not shown at all. As I understand they are hidden beneath each other.<br>
  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 <a href="https://jsfiddle.net/1x2hs26q/" rel="nofollow noreferrer">jsFiddle</a>:</p>
  
  <pre><code>.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&gt;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;    
     }
    }
  </code></pre>
  
  <p>Through a <strong>browserstack</strong> it seems to work well.
  But on my <a href="http://amalgamus.lt" rel="nofollow noreferrer">live website</a> it doesn't... The code is the same. I really don't understand how to fix it.. Already used such hacks such as <code>min-height: 1px</code> but no luck...</p>