看看这个图像：
正如你可以看到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;直到问题得到解决。
如果任何人有任何其他提示，为什么这个问题可能会发生，这将是巨大的。谢谢！
解决方法
FlexBox是比较新的，浏览器可能已经实现了一点点不同。
您可能会缺少-webkit前缀，因为它似乎是safari确实需要它在某些版本。
您可能会缺少-webkit前缀，因为它似乎是safari确实需要它在某些版本。
display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: stretch; align-items: stretch;
或者，也许你可以尝试使用：
word-break: break-all;
确保这些话会被破坏，不会溢出。
