Flexbox проблемы с распределением пространства ios

Взгляните на это изображение:

Как вы можете видеть, 2 концевые ссылки выходят из контейнера-якоря.

Это происходит только на iPad (с помощью симулятора для тестирования).

На рабочем столе он ведет себя так, как должен, разбивая слова в других ссылках, позволяя больше места распределять оставшиеся предметы.

Как будто ios не знает, как правильно сломать текст в первой ссылке.

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

Ответы

Ответ 1

Flexbox является относительно новым, и браузеры, возможно, внедрили его немного иначе друг от друга. Возможно, вам не хватает префикса -webkit-, так как похоже, что сафари нуждались в нем в некоторых версиях.

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

Или, может быть, вы можете попробовать:

word-break: break-all;

Чтобы эти слова были сломаны и не переполнились.

Ответ 2

Необходимо указать ширину в nav-section__item

.nav-section__item {
  padding: 0 20px;
    word-wrap: break-all;
    width: 20%;
}

Live Демо

Ответ 3

В моем опыте сафари и flexbox часто помогает просто добавить

display: flex;
flex-shrink: 0;

в контейнер, который слишком мал. Это должно гарантировать, что контейнер по меньшей мере имеет размер его содержащегося элемента.