34

本例中的 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不起作用。

4

5 回答 5

30

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

于 2014-05-05T08:08:17.617 回答
25

在 IEflex-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
于 2016-09-24T08:41:41.143 回答
17

我能够通过添加来解决这个问题：

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

于 2017-12-08T18:19:54.993 回答
8

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

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

小提琴

这是你想要的吗？

于 2015-02-03T10:42:14.500 回答
0

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

flex: 0 1 auto;
于 2019-02-13T18:05:41.127 回答