flexbox ios空间分布问题

Question

看一下这张图片：

正如您所看到的那样，2个末端链接突破了锚容器。

这只发生在iPad上（使用模拟器进行测试）。

在桌面上，它可以通过打破其他链接中的单词来保持行为，从而允许更多空间来分发剩余的项目。

好像ios不知道如何正确破解第一个链接中的文字。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新

• 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;

确保这些词语被破坏，并且不会溢出。

Answer 2

必须在nav-section__item

中指定宽度

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

直播Demo

Answer 3

根据我使用safari和flexbox的经验，通常只需添加

即可

display: flex;
flex-shrink: 0; 

到太小的容器。这应该保证容器至少是其所包含元素的大小。