title: Flexbox/IE11: flex-wrap: wrap does not wrap (Images + Codepen inside)
body: <p>I created a list with social icons. Those icons should wrap on small screens.</p>
  
  <p>I use <code>flex-wrap: wrap;</code> and it works perfect in Firefox and Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/gUoIS.png" alt="Chrome, Firefox"></p>
  
  <p>But Internet Explorer 11 (and IE 10) will not break the line:</p>
  
  <p><img src="https://i.stack.imgur.com/HPdR0.png" alt="IE 11"></p>
  
  <p><strong>Code Pen Example</strong></p>
  
  <p>View the code here: <a href="http://codepen.io/dash/pen/PqOJrG" rel="noreferrer">http://codepen.io/dash/pen/PqOJrG</a></p>
  
  <p><strong>HTML Code</strong></p>
  
  <pre><code>&lt;div&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/40x40" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/40x40" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/40x40" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/40x40" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/40x40" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/40x40" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/40x40" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;img src="http://placehold.it/40x40" alt=""&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS Code</strong></p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>This seems to be a IE bug which shows up when a flex element's parent container is set to <code>display: table;</code>. Removing this line fixes the problem. But I need <code>display: table;</code> to center the parent container.</p>
  
  <p>Any ideas how to get IE11 to wrap the images?</p>