Flexbugs: IE11 flex item overflow

[ghost]

Here's an example of the issue:

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

Chrome has what I assume is the desired behaviour. The <main> element (displayed in light gray), grows as much as its content needs, but does not exceed the height of the .container (displayed in dark gray). In the left example, we see that the <main> element stops at the height of the .container. In the right example, it only grows as much as the content requires.

In IE, on the left side, the <main> element spills OUTSIDE the .container, and performs properly on the right side. It's easy to prevent the <main> element from spilling out by setting flex:1; but then on the right side, the <main> element grows to fill up the entire space.

Is there a workaround to get IE to behave the way Chrome does?

[toothbrush7777777]

Really? I'm using Firefox, and the left one overflows .container. In Chrome, it also overflows the container (there just is no painted background colour outside the container).

[toothbrush7777777]

Adding overflow-y: auto; to main works as you might expect. Have a look at http://codepen.io/anon/pen/PNbyvw. Otherwise, if you want it to be hidden, overflow-y: hidden; would work.

[ghost]

So, I appreciate you looking into this. I was trying to dumb down my issue to a lowest common denominator sort of thing. here's a more robust example of what I'm trying to achieve in the real world. Look at the following in Chrome or Firefox (which display the result the same way) and then IE:

https://jsfiddle.net/6ykz5y73/

The issue is that IE refuses to keep .checklist in the example above relegated inside the .blade element. It overflows it for some reason.

EDIT: For clarity, I can make the example on the left work in IE if I set the blade to flex: 1 1 auto; but then the example on the right has the button at the bottom even though there aren't as many checkbox options. I'mt rying to keep the button directly below the checkboxes and have the jQuery scrollbar work if there are too many checkboxes.

[philipwalton]

Can you please try to get your reduced example working so it shows the bug? When you add a jQuery plugin into the mix there are too many factors to be able to easily identify what's going on.

[ghost]

Yeah, that's what I tried to do in my first example.

If I create a (not flex item) div with a specific width and height, content will spill outside of that div. That's the expected behaviour. In this case, the light gray div from my first example should have its height set by virtue of being a flex item, and the content should spill outside the div. That happens on Chrome and Firefox. In IE, the flex item grows to fit the content, and is no longer restricted by its parent's height.

[philipwalton]

Ok, I see what you're saying now.

I think this is part of a larger class of IE Flexbox bugs that happen with nested flex containers. It's hard to generalize it into a single bug, but at the same time it'd be pointless to list every single manifestation of it.

Also, I don't know of an all-purpose workaround, so I haven't documented it.

In your case, you can set flex: 1 1 0% on <main> and you'll get your desired results. In IE the default 0 1 auto isn't working, which suggests the auto value doesn't know what to base its calculation off of, so no shrinking happens.