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

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/

flexbox browser support: http://stackoverflow.com/a/35137869/3597276 — Michael Benjamin, Mar 21 '16 at 16:58

score 1 · Accepted Answer · answered Mar 21 '16 at 12:01

1

Add max-width to the span

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

answered Mar 21 '16 at 12:01

Manoj MG

38
2
6

score 0 · Answer 2 · answered Mar 21 '16 at 11:02

0

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

answered Mar 21 '16 at 11:02

Mamboleoo

459
2
6

issue only in IE10 – Felix A J Mar 21 '16 at 11:05
Can you provide a screenshot of you issue ? – Mamboleoo Mar 21 '16 at 11:18
screenshot added to question – Felix A J Mar 21 '16 at 11:22
IE10 only support flexbox with prefix. Try adding `display: -ms-flexbox;` on your `
– Mamboleoo Mar 21 '16 at 11:27

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

2 Answers2