web-dev-qa-db-ja.com

IE11のmultiline-flexboxが幅を間違って計算していますか？

IE11は、flex-wrap: wrap 使用されている。

http://jsfiddle.net/MartijnR/WRn9r/6/ を参照してください

4つのボックスにはそれぞれフレックスベースがあります。50％なので、2つのボックスからなる2行を取得する必要がありますが、IE11では各ボックスに1行が追加されます。境界線を0に設定すると、正しく機能します。

これがバグなのか、IE11を動作させる方法があるのか​​（それでも境界線を使用するのか）考えはありますか？

<section>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</section>

section {
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    box-sizing:border-box;
    margin:0;
}
.box {
    border: 1px solid black;
    background: #ccc;
    display: block;
    -ms-flex: 50%;
    -moz-flex: 50%;
    -webkit-flex: 50%;
    flex: 50%;
    box-sizing: border-box;
    margin:0;
}

追伸私のプロジェクトでは、ありがたいことに人気のあるブラウザの最後のバージョンのみをサポートする必要がありますが、IE11もそのうちの1つです。

csscss3internet-explorer-11flexbox
32
Martijn van de Rijdt

flexプロパティを使用してサイズを計算するときに_box-sizing_が考慮されないバグのように見えます。境界線は2pxを占めるため、50％を超えているため、1行に収まるのは1つだけなので、すべてのボックスが幅いっぱいに引き伸ばされます。境界線を無効にし、代わりに2pxのパディングを追加すると、同じことが発生することがわかります。

_max-width: 50%_ルールセットに_.box_を追加することで、境界を維持しながら正しく動作させることができます。それ以外の場合は、33.34％〜49％のフレックス値を使用できます。これにより、境界線を含めて幅が50％未満になり、利用可能なスペースを埋めるために要素が大きくなると、フレックスコンテナーの50％のままになります。 Kinいハックのようなものですが、50％から設定したflexの値を引いた値よりも大きいボーダーとパディングを組み合わせて追加しない限り機能します。

おそらく、パーセンテージ値を直接減らすよりも良い方法は、calc()を使用することです。これは、現代のFlexbox構文をサポートするすべてのブラウザでサポートされています。使用するパーセント値から左右のパディングとマージンの合計を差し引くだけです。これをやり直すと、ボックスサイズ設定プロパティは本当に必要ないので削除できます。IEでflex短縮形ですが、必要な_flex-basis_プロパティで使用できます。

_.box {
    border: 1px solid black;
    /* additional styles removed for clarity */

    /* 
    50% - (border-left-width + border-right-width +
           padding-left + padding-right)
    */
    -webkit-flex-basis: calc(50% - 2px);
    flex-basis: calc(50% - 2px);
}
_

デモをご覧ください： http://jsfiddle.net/dstorey/78q8m/3/

35
David Storey

RobからMicrosoftフォーラムで回避策を受け取りました。 http://social.msdn.Microsoft.com/Forums/ie/en-US/8145c1e8-6e51-4213-ace2-2cfa43b1c018/ie-11-flexbox-with-flexwrap-wrap-doesnt-seemを参照してください-to-calculate-widths-correctly-boxsizing-ignored？forum = iewebdevelopment

min-widthを設定し、flex:autoに変更すると、ボックスはflexinessを維持したまま動作します。

http://jsfiddle.net/MartijnR/WRn9r/23/ および以下を参照してください。回避策を含む少し高度な例があります。

<section>
    <div class="box fifty">1</div>
    <div class="box twentyfive">2</div>
    <div class="box twentyfive">3</div>
    <div class="box fifty">4</div>
    <div class="box fifty">5</div>
</section>


section {
    display: -moz-webkit-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    box-sizing:border-box;
    margin:0;
}
.box {
    border: 1px solid black;
    background: #ccc;
    display: block;
    box-sizing: border-box;
    margin:0;
    -ms-flex: auto;
    -moz-flex: auto;
    -webkit-flex: auto;
    flex: auto;
}
.fifty {
    min-width: 50%;
}
.twentyfive {
    min-width: 25%;
}
10
Martijn van de Rijdt

Philip Waltonには、このバグに関する優れた要約があります： https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box 。彼は2つのソリューションを提案しています。最も簡単な方法は_flex-basis: auto_を設定し、代わりにwidthを宣言することです。 （_max-width_または_min-width_ではありません。）このソリューションには、パディングまたは境界線の幅を変更するときにcalc()を調整する必要がないという利点があります。

7
nabrown

これは明らかにIEバグ なので、元の[正しい] CSSをそのままにして、IE10 +をターゲットとするハックを追加します。

/* IE10+ flex fix: */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .box {
        flex: 0;
        min-width: 50%;
    }
}

http://jsfiddle.net/stedman/t1y8xp2p/

6
stedman