Css IE10 flexbox的宽度包括填充，导致溢出。框大小：边框框不'；不固定

本例中的LHS flex子级具有1em填充，这将导致RHS溢出父级：

<div style="display: -ms-flexbox; box-sizing: border-box; width: 200px; border: 5px solid black">

    <div style="padding: 1em; -ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 33%; background-color: blue; box-sizing: border-box">
        LHS
    </div>

    <div style="-ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 67%; background-color: red; box-sizing: border-box">
        RHS
    </div>

</div>

LHS
RHS

这是小提琴：

---

当flex子级有填充时，如何消除溢出<代码>框大小：边框框不起作用。

我在

flexbox

和

框大小：边框框时遇到类似问题。后者似乎在IE中不起作用。在这种情况下，宽度不起作用，因为填充会改变它-但是如果您可以使用
最大宽度
，这应该可以解决问题。
问题似乎是有填充的框上的
-ms flex negative:0
的值，如果设置为1，它似乎起作用

RHS的背景现在将保留在框中，但其内容不会保留，尽管它与LHS相同。将
max width:100%
添加到LHS会修复此问题，但在RHS上不会，但添加
word break:break all
会导致内容中断并保留在RHS框中


这就是您想要的吗？
在IE
flex basis
中，不考虑
框大小：边框框
。这是一个已知的bug，如下所述：

虽然它现在已经被固定在边缘

一些修复：


将负边距应用于其容器以抵消子填充
使用弹性基础：计算（$basisValue-$paddingValue）

← 这对我最有效

使用伪元素而不是填充，伪元素不算作宽度

使用弹性基础：自动

明确限制宽度：

最大宽度：$value

---

我可以通过添加以下内容来解决此问题：

-ms-flex-preferred-size: calc($basisValue - $paddingValue * 2);

因此，即使使用

autoprefixer

，这种组合仍然有效：

.element {
    padding: 1rem;
    flex: 0 1 20%;
    -ms-flex-preferred-size: calc(20% - 2rem);
}

---

calc值轻松地覆盖了自动生成的前缀，只有IE注意到。

我没有访问IE10的权限，但在IE11中，我必须显式地将flex basis设置为auto：

flex: 0 1 auto;

---

实际上，您可以通过在CSS中使用“宽度”来解决行弯曲的问题。但“高度”不适用于柱弯曲。以下是原始fiddle的专栏版本：-ms flex首选尺寸：在左右两侧有填充物时效果良好。谢谢回答得很好，谢谢！就我而言，

max width

工作正常。