Collapse Text In Flex Without Specifying Width Or Flex-basis

I need to have a horizontal menu that will collapse text with ellipsis, but doesn't expand to full width. I've gotten it to work fine, except for IE. If I set width or flex-basis,

Solution 1:

One solution to make IE behave is to add display: flex to the li so it becomes a flex container.

html,body {
  font-family: verdana, sans-serif;
}
div {
  position: relative;
  width: 450px;
  background: #0088ff;
  margin-bottom: 20px;
}
divh2 {
  color: #fff;
  margin: 0;
  padding: 10px;
  line-height: 1em;
}
ul {
  display: flex;
  padding: 10px0;
  margin: 0;
  list-style: none;
}
ulli {
  margin: 0;
  padding: 10px30px;
  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  */
}
ulli:nth-child(2n+1) {
  background: #77aaff;
}
ullia {
  /* display: block;            not needed  */overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

---

Another is to add overflow: hidden to the li.

html,body {
  font-family: verdana, sans-serif;
}
div {
  position: relative;
  width: 450px;
  background: #0088ff;
  margin-bottom: 20px;
}
divh2 {
  color: #fff;
  margin: 0;
  padding: 10px;
  line-height: 1em;
}
ul {
  display: flex;
  padding: 10px0;
  margin: 0;
  list-style: none;
}
ulli {
  margin: 0;
  padding: 10px30px;
  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  */
}
ulli:nth-child(2n+1) {
  background: #77aaff;
}
ullia {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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