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框内.

小提琴

这是你想要的吗？