Flexbox/IE11: flex-wrap: wrap does not wrap (Images + Codepen inside)
36,092
Try defining a width for the parent container, e.g. width: 20%;
. Thus, the container will be formatted as you want and flex-wrap will work. And yes, you can remove the display: table;
.
Author by
dash
Updated on November 29, 2020Comments
-
dash over 3 years
I created a list with social icons. Those icons should wrap on small screens.
I use
flex-wrap: wrap;
and it works perfect in Firefox and Chrome:But Internet Explorer 11 (and IE 10) will not break the line:
Code Pen Example
View the code here: http://codepen.io/dash/pen/PqOJrG
HTML Code
<div> <ul> <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> <li><a href="#"><img src="http://placehold.it/40x40" alt=""></a></li> </ul> </div>
CSS Code
body {background: #000;} div { background: rgba(255, 255, 255, .06); display: table; padding: 15px; margin: 50px auto 0; } ul { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-flow: row wrap; flex-wrap: wrap; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; list-style: none; padding: 0; } li { background: purple; margin: 4px; } img { display: block; height: 40px; padding: 7px; width: 40px; }
This seems to be a IE bug which shows up when a flex element's parent container is set to
display: table;
. Removing this line fixes the problem. But I needdisplay: table;
to center the parent container.Any ideas how to get IE11 to wrap the images?
-
dash almost 9 yearsAlthough this solution is not 100% perfect, as I do not know the parent container's width, it works. Thanks a lot!
-
jhorapb almost 9 yearsYeah, with percentages you don't need to define an explicit width for example in pixels, and it's better to do it by relative values.
-
Tony Smith over 8 yearsAlong these same lines, you could add a max-width to the parent to make it wrap within the bounds of your layout.
-
Amerrnath over 7 years@jhorapb I know this solution might help this use case . But wats the actual issue with flex-wrap in IE10 or edge