flex - max-width does not cause text to wrap in IE10 - css

Question

Why text is not wrapping in IE10?
body{
background: url(http://i.imgur.com/ilgJJ1Q.gif);
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
display: flex;
height: 80px;
}
li{
display: flex;
}
ul a {
color: #fff;
display: flex;
-webkit-align-items: center;
align-items: center;
max-width: 240px;
padding: 12px 50px;
align-items: center;
text-transform: uppercase;
text-decoration: none;
}
li img{
border: 0;
margin-right: 10px;
}
li span span {
display: block;
height: 2px;
margin: 7px 0 -7px;
width: 25px;
}
li:last-child{
background: rgba(38, 46, 54, .6);
}
li:nth-child(2){ background: #a15796; }
li:nth-child(3){ background: #b48c4d; }
li:nth-child(4){ background: #3a7d7d; }
<ul class="top-level-tax">
<li>
<a href="#" >
<img src="http://i.imgur.com/SRVh4os.png">
<span>Lorem ipsum dolor<span style="background-color: #38729c;"></span></span>
</a>
</li>
<li>
<a href="#" >
<img src="http://i.imgur.com/rBM2CYr.png">
<span>consectetur adipisicing<span style="background-color: #a05995;"></span></span>
</a>
</li>
<li>
<a href="#" class="" >
<img src="http://i.imgur.com/9dFFuH5.png">
<span>Mollitia harum<span style="background-color: #b38c51;"></span></span>
</a>
</li>
<li>
<a href="#" >
<img src="http://i.imgur.com/7bQ73kd.png">
<span>veritatis ea ipsa<span style="background-color: #3d7d7d;"></span></span>
</a>
</li>
</ul>
https://jsfiddle.net/afelixj/79pybrh9/1/

Answer 1

Add max-width to the span
li span{
display: block;
max-width: 120px;
}

Answer 2

You need to add flex-wrap: wrap; on your <ul> to specify you want it to wrap its content.