Html IE中的Flexbox不'；不能正确设置项目宽度

我正在尝试使用flexbox在一个div中正确地分隔一些项目

<div class="container">
    <ul class="action-box">
        <li class="long-item">Some cool info That needs to be on 2 lines</li>
        <li><a>Do a thing</a></li>
        <li><a>Do a different thing</a></li>
    </ul>
    <div>
      <a>
        Do something different
      </a>
    </div>
</div>

一些很酷的信息需要放在两行上

我还尝试在长项目上设置
最大宽度
，它在IE中工作，但在chrome中偏离中心


我不知道该怎么处理。我可以用浏览器破解，但我觉得有更干净的方法
 IE在flexbox上有很多渲染问题

在这种情况下，
flex-basis:100%
似乎是问题所在

相反，请使用宽度：100%

li {
  /* flex-basis: 100%; */
  width: 100%; /* new */
}

同时使用

最大宽度

和

弹性基础

？仍然没有居中，但至少在不同浏览器之间保持一致