10

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

Xenyal
  • 2,136
  • 2
  • 24
  • 51
  • 2
    @Michael_B That question that mine is supposedly a duplicate of has 1) No accepted answer, 2) The one answer that's been posted I have seen and tried before of which, did not work. Also, that question is more specific towards `flex-direction: row` looking more like `flex-direction: column` within a parent container on IE11. My question is `flex-direction: row` overflowing a parent container's width on IE11. – Xenyal Nov 29 '16 at 19:52
  • 2
    Whether a question has an accepted answer or not is irrelevant. Many questions with useful answers have none accepted (example [**here**](http://stackoverflow.com/q/34352140/3597276) and [**here**](http://stackoverflow.com/a/33856609/3597276)). Clicking the checkmark is optional and often ignored. Per your second point, I've re-opened your post. – Michael Benjamin Nov 29 '16 at 19:55
  • @Michael_B Good point and thanks for the re-open. I'll be updating the question itself with things I've tried (And links to similar answers) so that duplicate answers can be avoided. – Xenyal Nov 29 '16 at 20:02
  • 3
    I think the reason you're not getting any answers relates to the complexity of the code. With a multitude of nested elements, it's difficult to identify the problem, much less solve it. Consider simplifying the code to the minimal necessary to reproduce the problem. – Michael Benjamin Nov 29 '16 at 21:41
  • @Michae_B Good advice. I've deleted everything unuseful in the fiddle. – Xenyal Nov 29 '16 at 23:09
  • 2
    Have you tried `width: 100%` on `.grid__row`? https://jsfiddle.net/6vymtwyp/80/ – Michael Benjamin Nov 29 '16 at 23:43
  • @Michael_B Yeah that worked. Basically, in IE11, adding empty `div`s around anything with width or flex will break the width inheritance as those properties aren't passed down unless specified explicitly. So either delete everything not containing those properties in the DOM Tree or add those properties in. – Xenyal Nov 30 '16 at 15:45
  • Flexbox works quite smoothly across modern browsers, until you hit IE11. Then you're forced to do a bunch of extra work. Not fun. – Michael Benjamin Nov 30 '16 at 15:47
  • My solution above is based on this answer (which you may have already seen, but perhaps didn't apply to the right container): http://stackoverflow.com/q/35111090/3597276 – Michael Benjamin Nov 30 '16 at 15:48

1 Answers1

2

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.

Dom
  • 36
  • 2