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), but in Firefox and Chrome it calculates it perfectly and fits everything inside 1260px. The main issue is that i have prefixed everything in what i believe is the right way, but i still get the issue.

You can see it here on jsFiddle - http://jsfiddle.net/andyjh07/ue2zfga6/

CSS:

.row {
  width: 100%;
  position: relative;
  background: red;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  margin-bottom: 40px; }

  .row:after {
    content: "";
    display: table;
    clear: both; }

  .row *[class^="col-"] {
    position: relative;
    display: block;
    height: auto; }

    .row *[class^="col-"]:first-child {
      margin-left: 0; }
  @media (min-width: 64em) {
    .row {
      box-orient: horizontal;
      -webkit-flex-direction: row;
      -moz-flex-direction: row;
      flex-direction: row;
      -ms-flex-direction: row; } }
  @media (min-width: 78.75em) {
    .row {
      max-width: 78.75em;
      margin: 0 auto; } }


.col-one-third {
  width: 100%;
  background: blue; }
  @media (min-width: 64em) {
    .col-one-third {
      width: 33.3%;
      margin-left: 40px; } }


.col-two-thirds {
  width: 66.7%;
  margin-left: 40px;
  background: blue; }

How it looks on Chrome, IE11, Firefox

How it looks on IE 10, emulated inside IE11's dev console/tools

As you can see, the margin's are being added and going beyond the width of the container

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.