title: Flexbox won't wrap within table in IE 10 and 11
body: <p>I'm using Flexbox inside a table, and it's not working in IE 10 and 11.  Before you tell me to stop using the table, let me explain that the table is in a vendor's code, and I've been asked to work within the HTML structures which lie outside my control.  But I really want to use flexbox, so that wrapping can occur at any screen width.</p>
  
  <p>I've created a small example of this at:   <a href="https://jsfiddle.net/6fv3Lekd/18/" rel="nofollow">https://jsfiddle.net/6fv3Lekd/18/</a></p>
  
  <p>My goals are as follows:</p>
  
  <ul>
  <li>I need the blue boxes to wrap just like the purple ones do, when resizing the browser.  (Works great in Chrome and other browsers.)</li>
  <li>I need to
  use a fixed-pixel flex-basis, like the 100px in this example, not a
  percentage.</li>
  <li>I want this to work inside a <code>&lt;td&gt;</code> table cell, where the
  table, tbody, tr and td do not have any fixed width setting.</li>
  </ul>
  
  <p>(NOTE:  I'm well aware that on IE 10 I will need various prefixed CSS attributes such as "-ms-flex-wrap: wrap" instead of the generic modern ones I am using.  But on IE 11, in Developer Tools it's telling me that the ones in my jsfiddle are being accepted (not crossed out), so I'm using this simplified version of my code to demonstrate the issue on IE 11.)</p>
  
  <p>Here is the code found at the jsfiddle link:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;div class="flex-cont"&gt;
          &lt;div class="flex-myitem"&gt;abc&lt;/div&gt;
          &lt;div class="flex-myitem"&gt;abc&lt;/div&gt;
          &lt;div class="flex-myitem"&gt;abc&lt;/div&gt;
          &lt;div class="flex-myitem"&gt;abc&lt;/div&gt;
          &lt;div class="flex-myitem"&gt;abc&lt;/div&gt;
          &lt;div class="flex-myitem"&gt;abc&lt;/div&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;div class="flex-cont"&gt;
      &lt;div class="flex-myitem-purple"&gt;abc&lt;/div&gt;
      &lt;div class="flex-myitem-purple"&gt;abc&lt;/div&gt;
      &lt;div class="flex-myitem-purple"&gt;abc&lt;/div&gt;
      &lt;div class="flex-myitem-purple"&gt;abc&lt;/div&gt;
      &lt;div class="flex-myitem-purple"&gt;abc&lt;/div&gt;
      &lt;div class="flex-myitem-purple"&gt;abc&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.flex-cont {
     display: flex;
     flex-wrap: wrap;
  }
  .flex-myitem {
     flex: 0 0 100px;
     border:1px solid blue;
  }
  .flex-myitem-purple {
     flex: 0 0 100px;
     border:1px solid purple;
  }
  </code></pre>
  
  <p>Just for kicks, I also tried setting the outer <code>table, tbody, tr and td</code> to use <code>display: block</code>.  This makes them the same as <code>&lt;div&gt;s</code> from what I understand, and it started working.  But I can't really do that to my table's tags in this situation.  Thanks for any help on this.</p>