IE11, IE10 Flexbox overflow bug

Just putting this here for posterity.

If you have a 100% width container and it uses display flex, the content will overflow it’s container; I had 2 div’s within my flexbox container, each set to 50% width. This worked great across the board except in IE, where the container ended up 3x the width of the page, making the whole page scroll side-to-side.

I tried every trick in the book to no avail (setting flex: 1 0 auto didn’t help).

The only thing that resolved it was setting a max-width on a child container inside of the flex child. It’s wider then we need (600px), so it doesn’t really effect the design. I tried setting the max-width to 1200px just to see if any max-width worked, but that caused some scrolling at smaller widths (not as much). Why this works I couldn’t tell you, but I do know this is a known but in IE. ugh.

Edit: I put this into Codepen to show the problem and solution, but I’m not seeing the issue happening in Codepen. Which means there’s something else going on as well…I’m pretty sure I turned all properties on and off to pinpoint the issue and didn’t see anything. Anyway.

See the Pen Margin collapse in action by Kristin (@kristinvalentine) on CodePen.