Text is not wrapping inside flexbox in IE EDGE

问题

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

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

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>