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

Question

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

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

当 window 太小无法显示所有项目时，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

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

Text is not wrapping inside flexbox in IE EDGE

html

css

internet-explorer

flexbox

microsoft-edge