IE10 flexbox宽度包括填充，导致溢出。 box-sizing：border-box无法修复

Question

此示例中的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>

这是小提琴：

http://jsfiddle.net/GY4F4/6/

当柔性儿童有填充物时，如何消除溢出？ box-sizing: border-box不起作用。

Answer 1

我和flexbox和box-sizing: border-box;有类似的问题。后者似乎在IE中似乎不起作用。宽度在这种情况下不起作用，因为填充将改变它 - 但如果你可以使用max-width，那应该解决问题。

Answer 2

在IE中，flex-basis没有考虑到box-sizing:border-box。这是一个知道错误，如下所述：https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box

虽然现在已经修复了Edge。

一些修复：

• 对其容器应用负边距以抵消儿童填充
• 使用flex-basis: calc($basisValue - $paddingValue)←这对我来说效果最好
• 使用伪元素而不是填充，伪元素不算作宽度
• 使用flex-basis: auto
• 明确限制宽度：max-width: $value

Answer 3

我能够通过添加以下内容来解决这个问题

-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注意到。

Answer 4

问题似乎是-ms-flex-negative: 0在具有填充的框上的值，如果设置为1，它似乎工作。

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

Fiddle

这是你想要的吗？

Answer 5

我无法访问IE10，但在IE11中，我必须将flex-basis明确设置为auto：

flex: 0 1 auto;