IE EDGEのフレックスボックス内にテキストが折り返されていません

Question

ULはdisplay: flexに設定されており、リストはflex-grow: 1に設定されているため、すべての項目の間隔が等しくなります。

各リスト項目の内側には、display: flex,justify-contentおよびalign-itemsが中央に設定されたリンクが設定されています。窓はすべての項目を表示するには小さすぎると

、LINK内のテキストはChromeとFFでラップしますが、IEエッジ:(

に私はこれまで。すべてのヘルプははるかに高く評価された解決策を見つけていないではありません。

http://codepen.io/kobiak/pen/JKNokJ

* { 
 
    box-sizing: border-box; 
 
} 
 
ul { 
 
    display: flex; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
li { 
 
    list-style: none; 
 
    flex-grow: 1; 
 
} 
 
li:hover a { 
 
    background: #000; 
 
} 
 
a { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    color: #ffffff; 
 
    background: #ffcc00; 
 
    text-align: center; 
 
    height: 60px; 
 
    flex-grow: 1; 
 
    flex-shrink: 1; 
 
    flex-basis: auto; 
 
}

<ul> 
 
    <li><a href="#">NAME HERE</a></li> 
 
    <li><a href="#">NAME HERE 2</a></li> 
 
    <li><a href="#">NAME HERE 2222</a></li> 
 
    <li><a href="#">NAME HERE 100000</a></li> 
 
    <li><a href="#">NAME HERE</a></li> 
 
</ul>

Answer 1

追加display: flexからliまでです。

Revised Codepen