文本未在IE EDGE中的flexbox中换行 [英] Text is not wrapping inside flexbox in IE EDGE

问题描述

我将UL设置为display: flex，并以flex-grow: 1列出，以便所有项目都具有相等的间距.

I have a UL set to display: flex and lists with flex-grow: 1, so that all items will take equal spacing.

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

Inside each list item, I have a link set with display: flex, justify-content and align-items set to center.

如果窗口太小而无法显示所有项目，则LINK内的文本将在Chrome和FF中包装，但不会在IE Edge中包装:(

When the window is too small to display all items, text inside the LINK will wrap in Chrome and FF but not in IE Edge :(

到目前为止，我还没有找到解决方案.感谢所有帮助.

I have not found a solution so far. All help is much appreciated.

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

推荐答案

将display: flex添加到li.

修订的Codepen

这篇关于文本未在IE EDGE中的flexbox中换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！