Flexbox/IE11: flex-wrap: wrap non si avvolge (Immagini + Codepen all'interno)

Question

Ho creato un elenco con icone sociali. Quelle icone dovrebbero avvolgere su schermi piccoli.

lo uso flex-wrap: wrap; e funziona perfetto in Firefox e Chrome:

Ma Internet Explorer 11 (e IE 10) non rompere la linea:

Esempio di codice penna

Visualizza il codice qui: http://codepen.io/dash/pen/PqOJrG

codice HTML

<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> 

codice CSS

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; 
} 

Questo sembra essere un bug di IE, che si presenta quando contenitore principale di un elemento flessibile è impostato su display: table;. La rimozione di questa linea risolve il problema. Ma ho bisogno di display: table; per centrare il contenitore genitore.

Qualche idea su come ottenere IE11 per avvolgere le immagini?

Answer 1

Provare a definire una larghezza per il contenitore genitore, ad es. width: 20%;. Pertanto, il contenitore verrà formattato come vuoi e il flex-wrap funzionerà. E sì, è possibile rimuovere il display: table;.