My flex container has a horizontal list of items which all browsers display properly inside their parent except IE11, that seems incapable of keeping them within it, instead they "bleed out" of it, like so:
Below is a simplified Fiddle of my setup which demonstrates the problem in action:
ul, li { list-style: none; margin: 0; padding: 0; } ul { display: flex; width: 200px; border: 1px dashed red; } li img { max-width: 100%; height: auto; }<ul> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> </ul>Result on Chrome: 
Result on IE11: 
Any workaround?
3 Answers
Answers 1
It looks like IE11 requires you to define a size for the flex items (li):
ul, li { list-style: none; margin: 0; padding: 0; } ul { display: flex; width: 200px; border: 1px dashed red; } li { /* NEW */ flex: 0 1 100%; /* flex-grow, flex-shrink, flex-basis */ /* flex: 1 */ /* alternatively, this also works (short for: fg:1, fs:1, fb:0px) */ } li img { max-width: 100%; height: auto; }<ul> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> </ul>Answers 2
I'm not sure, is the the correct approach or not, but you can try this hack, it works
you may also try this using modernizr to target IEbrowsers
ul, li { list-style: none; margin: 0; padding: 0; } ul { display: flex; width: 200px; border: 1px dashed red; } _:-ms-fullscreen .ie-hack li, :root .ie-hack li { display: flex; } li img { display: block; max-width: 100%; height: auto; }<ul class="ie-hack"> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></li> </ul>Answers 3
As has already been mentioned, IE11 wants child flex items to have a width set. Your markup shows that you are trying to set a height and width on the image. You could take off those height and width attributes in the image, and then just have your image set to width: 100%. This will allow each image to take up the space of its parent, and still scale based on how many are in the container.
Alternatively, if you don't want those images to get larger, you could set a max-width on the li
ul, li { list-style: none; margin: 0; padding: 0; } ul { display: flex; width: 200px; border: 1px dashed red; } li { flex-grow: 1; flex-shrink: 1; /* max-width: 50px; for keeping image from ever getting larger than certain point */ } li img { width: 100%; }<ul> <li><img src="http://i.imgur.com/60PVLis.png" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" alt=""></li> <li><img src="http://i.imgur.com/60PVLis.png" alt=""></li> </ul>
0 comments:
Post a Comment