megclaypool
2/28/2020 - 6:05 AM

Fucking IE Flexbox Rendering Bugs

[Fucking IE Flexbox Rendering Bugs]

References:
My specific problem: StackOverflow: IE10 flexbox widths include padding, causing overflow. box-sizing: border-box doesn't fix
Holy Fuck, it turns out there are a lot of bugs: Flexbugs

how to.md
content_copyfile_download
  • Rendered
  • Source

The Problem

IE uses box-sizing: content-box instead of box-sizing: border-box for flex-basis. That means if your flex children have padding, they will overflow their parent.

The Solution

-ms-flex-preferred-size: calc($basisValue - $paddingValue * 2) works, at least for IE 11! (From StackOverflow, but not the accepted solution! )