Flexbox won't wrap within table in IE 10 and 11

Question

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.

I've created a small example of this at: https://jsfiddle.net/6fv3Lekd/18/

My goals are as follows:

• I need the blue boxes to wrap just like the purple ones do, when resizing the browser. (Works great in Chrome and other browsers.)
• I need to use a fixed-pixel flex-basis, like the 100px in this example, not a percentage.
• I want this to work inside a <td> table cell, where the table, tbody, tr and td do not have any fixed width setting.

(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.)

Here is the code found at the jsfiddle link:

<table>
  <tbody>
  <tr>
    <td>
      <div class="flex-cont">
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
      </div>
    </td>
  </tr>
  </tbody>
</table>
<br>
<br>
<br>
<div class="flex-cont">
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
</div>

And the CSS:

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

Just for kicks, I also tried setting the outer table, tbody, tr and td to use display: block. This makes them the same as <div>s 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.

Answer 1

As a table element is not a block element, it only expand to its content size, and as the flex items are allowed to wrap, they do.

To make them behave the same in a table, you need to give the table the same width as the body.

To make IE10 behave, you need to add prefixed (-ms-) flex properties.

table {
  width: 100%;
  table-layout: fixed;         /*  for IE  */
}
.flex-cont {
   display: -ms-flex;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.flex-myitem {
   -ms-flex: 0 0 100px;
   flex: 0 0 100px;
   border:1px solid blue;
}
.flex-myitem-purple {
   -ms-flex: 0 0 100px;
   flex: 0 0 100px;
   border:1px solid purple;
}

<table>
  <tbody>
  <tr>
    <td>
      <div class="flex-cont">
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
      </div>
    </td>
  </tr>
  </tbody>
</table>
<br>
<br>
<br>
<div class="flex-cont">
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
</div>
      

---

Updated based on a comment

The fix using table-layout: fixed; for IE can be read more about here: flexbox-not-working-inside-table

Answer 2

I got this working using floats instead of flexbox. The wrapping behavior for the floats works great on IE 10 and 11, and acts the same as the flexbox wrapping but without browser issues. (It's not my preference because I want the unique capabilities of flexbox for other reasons in the future, but for this simple example it does the job, and I may end up settling for this approach.) Example below and posted on a different JSFiddle at https://jsfiddle.net/skurhu46/2/

<table class="my-table">
  <tbody>
  <tr>
    <td style="padding:0">
      <table class="my-table">
        <tbody>
        <tr>
          <td class="tbl-item">abc</td>          
          <td class="tbl-item">abc</td>          
          <td class="tbl-item">abc</td>          
          <td class="tbl-item">abc</td>          
          <td class="tbl-item">abc</td>          
          <td class="tbl-item">abc</td>          
        </tr>
        </tbody>
      </table>
    </td>
  </tr>
  </tbody>
</table>
<br>
<br>
<br>
<div class="flex-cont">
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
</div>

and the CSS:

.flex-cont {
   display: flex;
   flex-wrap: wrap;
}
.flex-myitem-purple {
   flex: 0 0 100px;
   border:1px solid purple;
}
.tbl-item {
  float: left;
  width: 100px;
  border:1px solid blue;  
  padding: 0;
}
.my-table {
  border-collapse: collapse;
}