html - 在 IE EDGE 中，文本未在 flexbox 内换行

Question

我将 UL 设置为 display: flex 并使用 flex-grow: 1 列出列表，这样所有元素的间距都相等。

在每个列表项中，我有一个链接集，其中 display: flex、justify-content 和 align-items 设置为居中。

当窗口太小无法显示所有元素时，LINK 中的文本将在 Chrome 和 FF 中换行，但在 IE Edge 中不会换行:(

到目前为止我还没有找到解决方案。非常感谢所有帮助。

* {
  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