Flexbox IE10 problemi di larghezza

Question

Il problema è che in IE10, la larghezza delle colonne all'interno della riga viene calcolata in modo errato, sembra che si aggiunga sulla larghezza dei margini della colonna (in totale 80px), ma in Firefox e Chrome lo calcola perfettamente e si adatta a tutto all'interno di 1260px. Il problema principale è che ho prefisso tutto in quello che credo sia il modo giusto, ma ho ancora il problema.

Potete vedere qui sul 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; } 

Come appare su Chrome, IE11, Firefox

Come appare su IE 10, emulato all'interno Console/strumenti dev di IE11

Come puoi vedere, i margini vengono aggiunti e vanno oltre la larghezza del contenitore

Answer 1

Non ho IE10 disponibile, ma sembra che tu debba guardare a caniuse.com e ai problemi noti. O forse questo user moderated list su Github. O forse la sezione commenti dello css-tricks guide.

Il sito caniuse cita:

IE10 e IE11 valori di default per flex sono 0 0 auto piuttosto che 0 1 auto, come per il progetto di specifiche, a partire da settembre 2013.

e

In IE10 e IE11, contenitori con display: flex e direzione flessibile: la colonna non calcolerà correttamente le dimensioni dei bambini flessi se il contenitore non ha altezza n ma nessuna proprietà altezza esplicita.

Il sito Github menzioni:

Quando si utilizza allineare-voci: centro su un contenitore flessibile nella direzione della colonna, il contenuto della voce di flessione, se troppo grande, traboccheranno loro container in IE 10-11.

Soluzione

La maggior parte del tempo, questo può essere risolto semplicemente impostando max-width: 100% sulla voce flex. Se l'elemento flessibile ha una spaziatura o un bordo, devi anche assicurarti di usare il ridimensionamento della scatola: border-box per tenere conto di quello spazio. Se l'elemento flessibile ha un margine, l'utilizzo del solo dimensionamento della scatola non funzionerà, quindi potrebbe essere necessario utilizzare un elemento contenitore con riempimento.

Questo comment on css-tricks mostra che in cui normalmente dire flex: 1; si dovrebbe dire -ms-flex: 1 0 auto;

Inoltre, è necessario modificare il codice in cui si fa qualcosa di simile:

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

a questo:

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

si vuole sempre la linea corretta del codice — quella senza bandiere — in fondo alla lista prefisso.