34

この例の 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動作しません。

4

5 に答える 5

30

と で同様の問題がflexboxありbox-sizing: border-box;ました。後者は IE では動作しないようです。この場合、パディングによって幅が変更されるため、幅は機能しませんが、使用できる場合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 に答える
8

-ms-flex-negative: 0問題は、パディングのあるボックスの値にあるようです。これが 1 に設定されている場合、機能しているように見えます。

RHS の背景はボックス内に残りますが、コンテンツは残りませんが、LHS と同じです。max-width: 100%LHS に追加すると修正されますが、RHS では修正されませんが、追加word-break: break-allするとコンテンツが壊れて RHS ボックス内に残ります。

フィドル

これは、あなたの望むことですか？

于 2015-02-03T10:42:14.500 に答える