flexbox ios空间分布问题

Question

看看这张图片:

正如您所看到的,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仍然有一些实施的错误.

所以我继续使用display: table;和显示:table-cell;直到问题得到解决.

如果任何人有任何其他提示,确切的问题可能发生的原因那将是很好的.谢谢!

Answer 1

Flexbox 相对较新，各个浏览器的实现方式可能略有不同。您可能缺少-webkit-前缀，因为看起来 safari 在某些版本上确实需要它。

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

或者，也许您可​​以尝试使用：

word-break: break-all;

确保那些话不会被打破，并且不会溢出。