Flexbox IE10 width issues

Question

The problem is that in IE10, the width of the columns inside the row is being calculated wrong, it appears to be adding on the width of the column margins (in total 80px), b

Answer 1

I don't have IE10 available, but it seems like you should look at caniuse.com and the known issues. Or maybe this user moderated list on Github. Or maybe the comment section of the css-tricks guide.

The caniuse site mentions:

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.

and

In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.

The Github site mentions:

When using align-items:center on a flex container in the column direction, the contents of flex item, if too big, will overflow their container in IE 10-11.

Workaround

Most of the time, this can be fixed by simply setting max-width:100% on the flex item. If the flex item has a padding or border set, you'll also need to make sure to use box-sizing:border-box to account for that space. If the flex item has a margin, using box-sizing alone will not work, so you may need to use a container element with padding instead.

This comment on css-tricks shows that where you would normally say flex: 1; you should say -ms-flex: 1 0 auto;

Also, you should change your code where it does something like this:

-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;

to this:

-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;

You always want the proper line of code—the one without flags— at the bottom of the prefix list.