Flex盒子在ios上切断了很长的内容

Question

使用flex来布局菜单，所有这些都适用于Windows上的chrome：

然而，在ios设备（各种iphone和ipads）上，较长的内容不会尽可能多地扩展其容器，和/或较小的项目不会缩小它们应该的数量，并且更长的内容被切断：

我在Safari 9上观看，它应该是最新的，不需要前缀（我还是试过前缀 - 它们不起作用）。我错过了什么吗？

<style>
.lvl1Menu
{
  width:750px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background-color:white;
  padding:0;
  font-size: 16px;
    flex-direction: row;

}

li{
  list-style: none;
  text-align:center;
  background-color:#EEEEEE;
  padding:0px;
  font-size: 25px;
  flex: 1 1 auto;

}

</style>
<ul class="lvl1Menu">
    <li>
        Some words
    </li>
    <li>
        Some words
    </li>
    <li>
        ONELONGWORD
    </li>
    <li>
        Some words
    </li>
    <li>
        Some words
    </li>
    <li>
        Some words
    </li>
    <li>
        Some words
    </li>
</ul>  

Answer 1

“Chrome，Opera和Safari不支持弹性项目的默认最小内容大小。将flex-shrink设置为0（而不是默认值1）以避免不必要的缩小。”

来源： https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/

我猜这个Chrome已经解决了这个问题，但Safari没有。

Answer 2

也许你需要设置flex-shrink:1;和flex-grow:1; https://css-tricks.com/almanac/properties/f/flex-shrink/