IE EDGE 中的 flexbox 内没有环绕文本答案

【问题标题】：Text is not wrapping inside flexbox in IE EDGEIE EDGE 中的 flexbox 内没有环绕文本
【发布时间】：2016-11-01 23:36:36
【问题描述】：

我将 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>

【问题讨论】：

你试过white-space: normal到a吗？

标签： html css internet-explorer flexbox microsoft-edge

【解决方案1】：

将display: flex 添加到li。

Revised Codepen

【讨论】：

传奇！谢谢。