html - IE 中的 Flexbox 无法正确设置元素宽度

Question

我正在尝试使用 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>

我试图让所有元素的大小相同。

我尝试设置 flex-basis，它在 chrome 中有效，但在 IE 中严重崩溃。

https://jsfiddle.net/w71t2247/7/

我还尝试在长元素上设置 max-width，这在 IE 中有效，但在 chrome 中偏离中心。

https://jsfiddle.net/w71t2247/8/

我不确定如何处理这个问题。我可以通过浏览器破解它，但我觉得有一种更简洁的方法。

Answer 1

IE 有很多关于 flexbox 的渲染问题。

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

相反，请使用 width: 100%。

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

https://jsfiddle.net/w71t2247/12/