IE 11 Nested Flex with row wrap does not wrap the contents when there is a table in its heirarchy

[bsk264]

If we have nested flex containers with a table anywhere in its heirarchy the row wrap does not seem to wrap. This is an IE-11 only issue.

http://codepen.io/anon/pen/kkoLdA

<table style="border:1px solid red;width:50%";>
 <tr>
   <td>
        <div class="layout flex">
         <div class="con flex">
           <label>First name</label>
           <div class="field-item"><input /></div>
          </div>
          <div class="con flex">
           <label>Last name</label>
             <div class="field-item"><input /></div>
          </div>
          <div class="con flex">
           <label>Address 1</label>
             <div class="field-item"><input /></div>
          </div>
          <div class="con flex">
           <label>Address 2</label>
              <div class="field-item"><input /></div>
          </div>
          <div class="con flex">
           <label>City</label>
              <div class="field-item"><input /></div>
          </div>
          <div class="con flex">
           <label>State</label>
             <div class="field-item"><input /></div>
          </div>
        </div>
   </td>
  </tr>
</table>

* {
  box-sizing: border-box;
}



.layout.flex {
    display: flex;
  flex-flow:row wrap;
  width:100%;
}

.con {
  width:auto;
    display: flex;
  flex-direction:column;

}

label {
  width: 120px;
}

.field-item {
  flex: 1;

}

The table need not even be the immediate parent. If its present anywhere in the hierarchy we can see this issue.

[philipwalton]

Have you discovered a workaround for this issue?

[bsk264]

@philipwalton Thanks for the response. But I have not yet discovered a feasible workaround because the table can be anywhere in the hierarchy. The only possinle solution that I have found so far is using table-layout:fixed on the table. But that is not the ideal solution for my use case due to some functionality that I have with respect to table.

[Pokechu22]

I was able to hack this into working by adding max-width: 1px to the <td>. Maybe this isn't the best fix but it seems to be working for me.

[philipwalton]

@Pokechu22 that doesn't appear to work for the example given, can you share how it's working for you?

[Pokechu22]

Hm, yeah. It doesn't seem to be correct. Here's a codepen. It does improve the appearance, and for the problem I had, it worked, but for the given example it's broken.

What it looks like without my change in IE

What it looks like after my change in IE

What it looks like in other browsers (in this case firefox) in either version

It also does look like table-layout: fixed; works the same way, so that's probably better.

[Freidhairick]

Hello,

setting "flex: 1 1 auto;" instead of "flex: 1;" fix the problem. Actually, it seems that IE11 set the flex-basis to 0px by default (as Chrome and Firefox set it to 0%).

[MelissaChow]

I've also encountered this issue on IE11 while working with an outdated enterprise framework that inserts extraneous <table> tags.

I have found that table-layout: fixed; by itself does not always do the trick. The table also has to be set to a width of 100% and then everything seems to work as expected. So the CSS to apply on the parent table is now table-layout: fixed; width: 100%;.

In my case, I am not able to target the closest parent <table> through CSS so I use the following jQuery to apply the styles:

$( '.flex-component' ).closest( 'table' ).css({ 'table-layout': 'fixed', 'width': '100%' });

[mihkeleidast]

Ran into this myself. Solved it by adding to wrapper elements (ugh, I know) to the existing flex parent that have the styles

.wrapper {
  display: flex;
}

.wrapper-inner {
  flex-basis: 100%;
}

this will force wrapping for the nested flex even in IE. Your example with the fix: https://codepen.io/risker/pen/oadGYg I believe the overlapping labels and inputs in IE are some other bug...

My personal usecase: https://codepen.io/risker/pen/OBZxpg

[mpolutta]

risker's 'wrapper' and "wrapper-inner" class approach to the containers also worked for my situation, which did not involve a table wrapper. My initial problem was that the content item "div"s were rendering on top of each other. One comment elsewhere suggested that IE did not support percent in the "flex: 1 1 25%". So I changed to "px", but still did not wrap. Once I applied the container class attributes with accompanying CSS, things started working. I also added "flex-direction: column;" to the CSS style for content items. I later added back "%", and it does work. So the "wrapper" and "wrapper-inner" is the secret sauce for IE.