幅とフレックスベースの差

Question

What are the differences between flex-basis and width?で説明できないwidthとflex-basisの動作の違いに遭遇しました。

.outer { 
 
    display: flex; 
 
    background: yellow; 
 
    padding: 10px; 
 
} 
 
.middle { 
 
    display: flex; 
 
    flex-shrink: 0; 
 
    background: red; 
 
    padding: 10px; 
 
} 
 
.inner { 
 
    flex-basis: 258px; 
 
    flex-shrink: 0; 
 
    display: flex; 
 
    flex-grow: 0; 
 
    background: green; 
 
} 
 
.inner2 { 
 
    width: 258px; 
 
    flex-shrink: 0; 
 
    display: flex; 
 
    flex-grow: 0; 
 
    background: green; 
 
}

<div class="outer"> 
 
    <div class="middle"> 
 
    <div class="inner"> 
 
     hello 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="outer"> 
 
    <div class="middle"> 
 
    <div class="inner2"> 
 
     hello 
 
    </div> 
 
    </div> 
 
</div>

Here私がいる問題を示す一例です。しかし、フレックスコンテナ（.middle要素）は、その子要素（.inner要素）の本来の幅を無視し、テキストのみを考慮に入れているようです。

この違いは、Chrome、FF、Safariの最新バージョン（IE11/Edgeではなく）で確認できます。

明確化：私はなぜIE11/Edgeが動作するのか尋ねていません。その行動（この場合）は実際に私にとっては論理的なようです。私は他のすべてのブラウザに違いがあるのか​​と尋ねています。

更新：Edge 13はIE11のように動作します。

Answer 1

これはバグのようです。 フレックスコンテナとフレックスアイテムの両方である要素は、flex-basisで設定されている場合、子要素の本来のサイズを無視しているように見えますが、代わりにその子のコンテンツの幅/高さを測定することを選択します。これを正しく実装しているブラウザはIE11/Edgeだけです。

Chromium bug tracker

Answer 2

これは、IE11がフレックスを別様にサポートしている（技術的に部分的にしかサポートしていない）ためです。 IE 11では、3番目の引数にユニットを追加する必要があります。フレックスベースのプロパティは、以下のソースのmsdnドキュメントを参照してください。

単位がないフレックスベーシスの値を持つフレックス略記宣言は無視されます。

flex-basisは最小幅です。コンテナには、他のルールに基づいて拡大/縮小することができます。幅は、フレックスやフレックスベースと同時に使用する必要はありません。これは、Xブラウザの互換性と競合します。

あなたのコードを更新しました。こちらをご覧ください：http://codepen.io/mattpark22/pen/wWqKpz

を今、あなたはブラウザが持つフレックス扱い方は異なる見ることができます。

flex-basis: 258px; 
width: 258px; 

私も.outerから

display: flex; 

を削除した - これも効果を持っていました。

出典：http://caniuse.com/#search=flex-basis

出典：https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored

出典：https://msdn.microsoft.com/en-us/library/dn254946%28v=vs.85%29.aspx