title: CSS3 - Flex wrap not working on IOS 10.1.1 Safari & Chrome
body: <p>I'm trying to use flex wrap and min-width: 50% to dynamic grid layout where single cells occupy all width. The problem is that it's not working correctly in iOS 10.1.1 (iPhone 5c) Safari and Chrome - the display is not grid-like, but a horizontal layout. In desktop Chrome (Ubuntu) and Android Chrome is working fine. </p>
  
  <p>Jsfiddle demo: <a href="https://jsfiddle.net/9dscc1Lq/" rel="nofollow noreferrer">https://jsfiddle.net/9dscc1Lq/</a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;style&gt;
  
  body {
      width: 300px;
  }
  
  .tabs {
      width: 100%;
      display: flex;
      display: -webkit-flex;
      flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      flex: 0 0 auto;
      -webkit-flex: 0 0 auto;
      box-sizing: border-box;
      flex-flow: row wrap;
      -webkit-flex-flow: row wrap;
  }
  
  .tab {
      border: 1px solid #3A3A3A;
      color: #929292;
      min-width: 50%;
      box-sizing: border-box;
      flex: 1 1 0;
      -webkit-flex: 1 1 0;
      text-align: center;
  }
  
  &lt;/style&gt;
  
  &lt;div class="tabs"&gt;
      &lt;div class="gwt-HTML tab"&gt;1&lt;/div&gt;
      &lt;div class="gwt-HTML tab"&gt;2&lt;/div&gt;
      &lt;div class="gwt-HTML tab"&gt;3&lt;/div&gt;
      &lt;div class="gwt-HTML tab"&gt;4&lt;/div&gt;
      &lt;div class="gwt-HTML tab"&gt;5&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Expected layout (correct):</p>
  
  <p><a href="https://i.stack.imgur.com/Qy7jV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qy7jV.png" alt="enter image description here"></a></p>
  
  <p>iOS behavior (incorrect):
  <a href="https://i.stack.imgur.com/4D9oi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4D9oi.png" alt="enter image description here"></a></p>
  
  <p>Please advise!</p>