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-negative: 0的值，如果设置为1，它似乎可以正常工作。

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

Fiddle

这是你想要的吗？

Answer 4

我能够通过添加：

来解决这个问题

-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 5

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

flex: 0 1 auto;

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

5 个答案: