在Flex中折叠文本而不指定width或flex-basis

Question

我需要一个水平菜单，它会用省略号折叠文本，但不会扩展到全宽。我已经让它工作正常，除了IE。如果我设置宽度或弹性基础，它将工作，但然后它不再基于内容大小设置。有没有人对解决方法有任何提示？我已经用谷歌搜索了一下，但到目前为止我没有尝试过任何事情。

html,body {
  font-family: verdana, sans-serif;
}
div {
  position: relative;
  width: 450px;
  background: #0088ff;
  margin-bottom: 20px;
}
div h2 {
  color: #fff;
  margin: 0;
  padding: 10px;
  line-height: 1em;
}
ul {
  display: flex;
  padding: 10px 0;
  margin: 0;
  list-style: none;
}
ul li {
  margin: 0;
  padding: 10px 30px;
  background: #bbccff;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  text-align: center;
  min-width: 0;
}
ul li:nth-child(2n+1) {
  background: #77aaff;
}
ul li a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div>
  <h2>Should collapse</h2>
<ul>
  <li style='flex-shrink:1'><a>Test</a></li>
  <li style='flex-shrink:11'><a>Test Medium</a></li>
  <li style='flex-shrink:13'><a>Test A Longer Phrase</a></li>
</ul>
</div>


<div>
  <h2>Should not expand</h2>
<ul>
  <li style='flex-shrink:1'><a>Test</a></li>
  <li style='flex-shrink:11'><a>Test Medium</a></li>
</ul>
</div>

Answer 1

使IE运行的一个解决方案是将display: flex添加到li，以便它成为灵活容器。

html,body {
  font-family: verdana, sans-serif;
}
div {
  position: relative;
  width: 450px;
  background: #0088ff;
  margin-bottom: 20px;
}
div h2 {
  color: #fff;
  margin: 0;
  padding: 10px;
  line-height: 1em;
}
ul {
  display: flex;
  padding: 10px 0;
  margin: 0;
  list-style: none;
}
ul li {
  margin: 0;
  padding: 10px 30px;
  background: #bbccff;
  /*                        not needed as it is their default
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  */
  text-align: center;
  min-width: 0;
  display: flex;            /*  fix for IE  */
}
ul li:nth-child(2n+1) {
  background: #77aaff;
}
ul li a {
  /* display: block;            not needed  */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div>
  <h2>Should collapse</h2>
<ul>
  <li style='flex-shrink:1'><a>Test</a></li>
  <li style='flex-shrink:11'><a>Test Medium</a></li>
  <li style='flex-shrink:13'><a>Test A Longer Phrase</a></li>
</ul>
</div>


<div>
  <h2>Should not expand</h2>
<ul>
  <li style='flex-shrink:1'><a>Test</a></li>
  <li style='flex-shrink:11'><a>Test Medium</a></li>
</ul>
</div>

另一种方法是将overflow: hidden添加到li。

html,body {
  font-family: verdana, sans-serif;
}
div {
  position: relative;
  width: 450px;
  background: #0088ff;
  margin-bottom: 20px;
}
div h2 {
  color: #fff;
  margin: 0;
  padding: 10px;
  line-height: 1em;
}
ul {
  display: flex;
  padding: 10px 0;
  margin: 0;
  list-style: none;
}
ul li {
  margin: 0;
  padding: 10px 30px;
  background: #bbccff;
  /*                        not needed as it is their default
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  */
  text-align: center;
  /* min-width: 0;          not needed when overflow:hidden is used  */
  overflow: hidden;         /*  fix for IE  */
}
ul li:nth-child(2n+1) {
  background: #77aaff;
}
ul li a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div>
  <h2>Should collapse</h2>
<ul>
  <li style='flex-shrink:1'><a>Test</a></li>
  <li style='flex-shrink:11'><a>Test Medium</a></li>
  <li style='flex-shrink:13'><a>Test A Longer Phrase</a></li>
</ul>
</div>


<div>
  <h2>Should not expand</h2>
<ul>
  <li style='flex-shrink:1'><a>Test</a></li>
  <li style='flex-shrink:11'><a>Test Medium</a></li>
</ul>
</div>