web-dev-qa-db-ja.com

IE10 flexbox幅にはパディングが含まれるため、オーバーフローが発生します。box-sizing：border-boxは修正されません

この例の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/

Flexの子供にパディングがある場合、どのようにオーバーフローを排除できますか？ box-sizing: border-boxは機能しません。

cssflexboxinternet-explorer-11internet-explorer-10
31
Graeme Pyle

flexboxとbox-sizing: border-box;でも同様の問題がありました。後者はIEで動作しないようです。この場合、パディングによって幅が変更されるため、幅は機能しません。ただし、max-widthを使用できる場合は、問題が解決されます。

23
smogg

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_
20
Ariel

私はこれを追加することでこれを解決することができました：

-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によってのみ通知されます。

11
allanberry

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

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

フィドル

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

8
Ian Devlin

IE10にはアクセスできませんが、IE11ではflex-basisを明示的にautoに設定する必要がありました。

flex: 0 1 auto;
0
jekie