Проблемы с шириной Flexbox IE10

Question

Проблема в том, что в IE10 ширина столбцов внутри строки вычисляется неправильно, она, кажется, добавляет ширину полей столбца (всего 80 пикселей), но в Firefox и Chrome он отлично его вычисляет и вписывается во все 1260px. Основная проблема заключается в том, что я превзошел все в том, что я считаю правильным, но я все еще получаю эту проблему.

Вы можете увидеть его здесь на 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; } 

Как это выглядит на Chrome, IE11, Firefox

Как это выглядит на IE 10, эмулировать внутри Консоль/инструменты IE11's

Как вы можете видеть, маржа добавляется и выходит за пределы ширины контейнера

Answer 1

У меня нет IE10, но похоже, что вы должны посмотреть caniuse.com и известные проблемы. Или, может быть, это user moderated list на Github. Или, может быть, раздел комментариев css-tricks guide.

Сайт caniuse упоминает:

IE10 и IE11 значения по умолчанию для Flex являются 0 0 auto, а не 0 1 auto, в соответствии с проектом спецификации, по состоянию на сентябрь 2013 г.

и

В IE10 и IE11 контейнеры с дисплеем: flex и flex-direction: столбец не будет правильно вычислять размеры их гибких детей, если контейнер имеет mi n-height, но не имеет явного свойства высоты.

Сайт Github упоминает:

При использовании выравнивают-элементы: центр на гибком контейнере в направлении колонки, содержимое гибкого элемента, если слишком большой, переполнит их контейнер в IE 10-11.

Обход

Большую часть времени, это может быть исправлено, просто установив максимальную ширину: 100% от гибкого элемента. Если элемент гибкости имеет дополнение или набор границ, вам также необходимо убедиться, что вы используете поле размера: border-box для учета этого пространства. Если элемент гибкости имеет маржу, использование одного размера по размеру не будет работать, поэтому вам может потребоваться использовать элемент контейнера с дополнением.

Этот comment on css-tricks показывает, что там, где обычно говорят flex: 1; вы должны сказать -ms-flex: 1 0 auto;

Кроме того, вы должны изменить свой код, где он делает что-то вроде этого:

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

к этому:

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

Вы всегда хотите правильную строку кода — одно без флагов — в нижней части списка префиксов.