IE10 flexbox 宽度包括填充，导致溢出。 box-sizing：边框框不修复

Posted 2023-03-04

技术标签:

【中文标题】IE10 flexbox 宽度包括填充，导致溢出。 box-sizing：边框框不修复【英文标题】：IE10 flexbox widths include padding, causing overflow. box-sizing: border-box doesn't fix 【发布时间】：2013-10-19 10:24:58 【问题描述】：

本例中的 LHS flex child 有 1em 填充，这会导致 RHS 溢出 parent：

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

当 flex 子级有填充时，如何消除溢出？ box-sizing: border-box 不起作用。

【问题讨论】：

您实际上可以通过在 CSS 中使用“宽度”来解决此问题。但是“高度”不适用于列弯曲。这是原始小提琴的专栏版本：jsfiddle.net/GY4F4/7 【参考方案1】：

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

flex: 0 1 auto;

【讨论】：

【参考方案2】：

我可以通过添加来解决这个问题：

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

【讨论】：

-ms-flex-preferred-size：当左右两边有填充时效果很好。谢谢！【参考方案3】：

在 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

【讨论】：

很好的答案，谢谢！就我而言，max-width 工作正常。【参考方案4】：

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

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

Fiddle

这是你想要的吗？

【讨论】：

【参考方案5】：

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