title: flexbox ios space distribution issues
body: <p>Take a look at this image:</p>
  
  <p><a href="https://i.stack.imgur.com/rCtoY.png"><img src="https://i.stack.imgur.com/rCtoY.png" alt="enter image description here"></a></p>
  
  <p>As you can see the 2 end links break out of the anchor container.</p>
  
  <p>This is only happening on an iPad (using simulator to test).</p>
  
  <p>On the desktop it behaves as it should by breaking the words in the other links allowing for more space to distribute the remaining items.</p>
  
  <p>It's as if ios doesn't know how to properly break the text in the first link.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.nav-section {
    padding: 0 30px;
  }
  .nav-section__list {
    display: inline-flex;
    align-items: stretch;
    margin: 0 auto;
  }
  .nav-section__item {
    padding: 0 20px;
  }
  
  .nav-section__link {
    display: block;
    background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="nav-section"&gt;
    &lt;div class="nav-section__list"&gt;
  
      &lt;div class="nav-section__item"&gt;
        &lt;a href="#" class="nav-section__link"&gt;AAAAA AAAA-AAAAAAAA AAAAAAAAA&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="nav-section__item"&gt;
        &lt;a href="#" class="nav-section__link"&gt;AAA AAAAAAAA AAAAAAAAAA&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="nav-section__item"&gt;
        &lt;a href="#" class="nav-section__link"&gt;AAAAAAAAAAA&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="nav-section__item"&gt;
        &lt;a href="#" class="nav-section__link"&gt;AAAAAAA&lt;/a&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Update</strong></p>
  
  <ul>
  <li><code>word-break: break-all</code> is not a valid solution:</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/gPZD1.png"><img src="https://i.stack.imgur.com/gPZD1.png" alt="enter image description here"></a></p>
  
  <ul>
  <li><code>word-wrap: break-all</code> also doesn't work:</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/VNOw2.png"><img src="https://i.stack.imgur.com/VNOw2.png" alt="enter image description here"></a></p>
  
  <p>This is the same resolution but on a desktop:</p>
  
  <p><a href="https://i.stack.imgur.com/x2kuW.png"><img src="https://i.stack.imgur.com/x2kuW.png" alt="enter image description here"></a></p>
  
  <p>As you can see the way the words break is completely different. The iPad just doesn't want to co-operate.</p>
  
  <p><strong>Update 2</strong></p>
  
  <p>I have run into the same issue in another instance of flexbox. It seems like IOS still has some bugs with the implementation.</p>
  
  <p>So I went ahead and used <code>display: table;</code> and display: <code>table-cell;</code> just until the issue is resolved.</p>
  
  <p>If anybody has any other hints as to exactly why the issue might be happening that would be great. Thanks!</p>