你可以在这里看到它在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的外观
IE10的开发控制台/工具中的IE 10的外观如何
正如你所看到的那样,边距被添加并超出了容器的宽度
解决方法
caniuse网站提到：
IE10 and IE11 default values for flex are
0 0 autorather than0 1 auto,as per the draft spec,as of September 2013.
和
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.
Github网站提到：
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.
这个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;
