html – 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>

更新

> word-break：break-all不是一个有效的解决方案：

> word-wrap：break-all也不行：

这是相同的解决方案，但在桌面上：

正如你可以看到的话，断言是完全不一样的。 iPad只是不想合作。

更新2

在另一个flexbox实例中遇到同样的问题。看来IOS还是有一些bug的实现。

所以我继续使用display：table;并显示：table-cell;直到问题得到解决。

如果任何人有任何其他提示，为什么这个问题可能会发生，这将是巨大的。谢谢！