html - 当 flex 元素变得太大时，iPad Safari 会忽略边距

Question

我有几个 flex 容器，每个容器有 3 个 flex 元素。前两个 flex-items 有一个 margin-right，将它们彼此隔开，并与第三个 item 隔开。前两项总是很短(在本例中为恒定宽度)，第三项的宽度可变(可以足够长以换行)。

Here's an example (looks fine in Chrome, not so much on iPad)

li {
  display: flex;
  display: -webkit-flex;
}

.one, .two {
  margin-right: 10px;
}

<ul>
  <li>
    <span class="one">hey</span>
    <span class="two">ho</span>
    <span class="three">Lorem ipsum dolor sit amet.</span>
  </li>
  <li>
    <span class="one">hey</span>
    <span class="two">ho</span>
    <span class="three">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate molestias dolore in, nam neque facilis nulla eum beatae, excepturi fugiat.</span>
  </li>
  <li>
    <span class="one">hey</span>
    <span class="two">ho</span>
    <span class="three">Lorem ipsum dolor.</span>
  </li>
</ul>

这在几乎所有浏览器中都运行良好(我省略了 -ms- 前缀，因为它们与这个问题无关)，但在 iPad 的 Safari(特别是运行 Safari 8 的 iPad Air 2，也许其他)中，边距变得当第三个元素试图变大时完全被忽略，前两个元素被挤压在一起。

---

预计

---

实际

---

这闻起来非常像 Safari 中的错误，但我找不到任何关于此的在线错误报告或讨论。它在几乎所有其他浏览器中的行为都符合预期。我试过摆弄几乎所有的 flex- 属性，但无济于事。

我首先也是最重要的是寻找解决方法，然后还要寻找对发生这种情况的原因的解释。

Answer 1

将 -webkit-flex: 1; 添加到 .three 类。这告诉父容器这个元素是灵活的。 ;-)