Making flexbox inherit proper width in IE11

Question

We have a series of div components that are supposed to flex in IE11 as per the same behavior in Chrome. Within the following fiddle, you will find checkbox elements that make up a 'column' structure, as well as checkbox elements that are expected to fill the width of the entire parent.

On the second row where the full-width checkbox elements begin, that element is expected to wrap to the next line, because the .grid__item-flex element within it exceeds that width available to it in .grid__row a couple of levels up. However, on IE11, that width ceases to be respected, and thus .grid__item-flex continues to overflow off the width of the parent element.

Potential solutions that failed include enforcing a width on .grid__item-flex; where we give it 100% width, but the nested checkbox elements above will lose its column structure. Also, max-width: 100% as a property seems to be ignored when we apply it to .grid__item-flex.

Is there a CSS solution where we can force .grid__item-flex to respect its container width without breaking the nested columns above it, and ensure that the last checkbox element (below it) stays on the same line?

The JSFiddle that replicates my problem can be found here. The example works as expected on Chrome. Update Nov. 2018, JSFiddle no longer supports IE so this example is invalid unless we sandbox it elsewhere.

---

To summarize, there's two cases where flexboxes has to work simultaneously:

1) n number of div in a row that wraps to the next line if row width exceeds parent's width

• We can achieve this using flex-wrap: wrap, but only when element has correct width

2) div that wraps to the next line if it's own content exceeds parent's width

---

Things I've tried:

• Expanding out the shorthand flex: 1 into its full properties flex-grow flex-shrink flex-basis as "IE10 and IE11 default values for flex are 0 0 auto rather than 0 1 auto, as per the draft spec, as of September 2013"

• Using a JS Polyfill for IE Flexbox, however the project is no longer being maintained (and did not work as a fix)

• Using a PostCSS plugin for Webpack that attempts a global fix using flex: 1 1 0%

• Applying width: 100% on the div that overflows its parent causes the nested columns above to turn into one long column, thus although it partially fixes the overflow issue, it defeats the purpose of having flexbox in the first place (since we want as many divs as possible to flex into a row).

Answer 1

If you need a solution which doesn't involve declaring width, I was able to get this working with a couple of flex specifications:

See example: https://jsfiddle.net/0ykq19um/

.grid__item-flex {
    flex: 0 1 auto;
}

To be explicit with IE,

.grid__item-flex:only-child {
    flex: 1 1 auto;
}

To allow full-width, and

.grid__row-overflow {
    flex: 1 1;
}

For a new class on the .grid__row.grid__row-md.parent which surrounds the (potentially) overflowing row.