IEのFlexboxで項目の幅が正しく設定されない

Question

div内のいくつかの項目を適切に配置するためにflexboxを使用しようとしています。

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

私はまた、IEで動作し、長い項目、上max-widthを設定しようとしたが、Chromeの中心から外れています。

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

私はこれを処理する方法がわかりませんよ。私はそれをブラウザでハックすることができましたが、よりクリーンな方法があるように感じます。

Answer 1

IEにはフレックスボックスのレンダリングに問題があります。

この場合、flex-basis: 100%が問題であるようです。

代わりにwidth: 100%を使用してください。

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

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