IE11 下使用 flex 布局 box-sizing 失效的问题

场景：

解决 IE11 下 使用 flex 布局 box-sizing 失效的问题

采用 flex 布局方式，每行呈现四个元素，超过个数就换行显示。布局大概如下图：

​

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
 </div>

.parent {
    width: 500px;
    height: 500px;
    background-color: #000;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    border: 1px solid #000;
}
.child {
    flex: 0 0 25%;
    height: 100px;
    border: 1px solid #000;
    background-color: pink;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

问题：

当设置 border 属性后，在谷歌、火狐浏览器都正常显示，切换到 IE11 浏览时，发现一排并未显示四个方格，情况如下：

​

即使 box-sizing 设置了 IE 浏览器前缀，样式也并未生效，但是去掉 border 后，排列显示正常。

原因分析：

在 flex 布局中，按照 box-sizing:  boder-box 属性的原则，会影响宽度的计算。

解决方案：

给每项添加 max-width 属性，限制最大宽度，即可解决。

.child {
    background-color: pink;
    flex: 0 0 25%;
    max-width: calc(100%/4);
    height: 100px;
    border: 1px solid #000;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}