flexbox ios space distribution issues

Question

Take a look at this image:

As you can see the 2 end links break out of the anchor container.

This is only happening on an iPad (using simulator to test).

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.

It's as if ios doesn't know how to properly break the text in the first link.

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

<nav class="nav-section">
  <div class="nav-section__list">

    <div class="nav-section__item">
      <a href="#" class="nav-section__link">AAAAA AAAA-AAAAAAAA AAAAAAAAA</a>
    </div>

    <div class="nav-section__item">
      <a href="#" class="nav-section__link">AAA AAAAAAAA AAAAAAAAAA</a>
    </div>

    <div class="nav-section__item">
      <a href="#" class="nav-section__link">AAAAAAAAAAA</a>
    </div>

    <div class="nav-section__item">
      <a href="#" class="nav-section__link">AAAAAAA</a>
    </div>

  </div>
</nav>

Update

• word-break: break-all is not a valid solution:

• word-wrap: break-all also doesn't work:

This is the same resolution but on a desktop:

As you can see the way the words break is completely different. The iPad just doesn't want to co-operate.

Update 2

I have run into the same issue in another instance of flexbox. It seems like IOS still has some bugs with the implementation.

So I went ahead and used display: table; and display: table-cell; just until the issue is resolved.

If anybody has any other hints as to exactly why the issue might be happening that would be great. Thanks!

Answer 1

Flexbox is relatively new, and browsers may have implemented it a little diferently from each other. You may be missing the -webkit-prefix, as it looks like safari did need it on some versions.

display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: stretch;
align-items: stretch;

Or, maybe you could try using:

word-break: break-all;

To ensure that those words will be broken, and will not overflow.