なぜ を使用するのか にフレックス表示を適用する場合、フレックスボックス に抵抗します。要素を追加すると、Firefox や Chrome などのブラウザで予期しない動作が発生します。仕様では に対する特別な処理が示されていないにもかかわらず、Flex はブロックのように動作し、inline-flex は inline-block のように動作します。 理由 バグによると984869、 、および は純粋な CSS では完全には実装できないため、ブラック ボックスとして機能します。これは、他の CSS スタイルの要素に対して同じように応答しない可能性があることを意味します。特に、 の場合、ブラウザは子要素のレイアウトを制御する事前に決定されたフレーム クラスを使用してそれをレンダリングします。このフレーム クラスは、CSS で設定された表示プロパティをオーバーライドします。 ベスト プラクティス 内で目的のレイアウトを実現するにはクロスブラウザの場合は、ラッパー を使用することをお勧めします。 Firefox のアップデート Firefox バージョン 46 以降では、 内での場合と同様に Flexbox が実装されています。 fieldset>、バグ 1230207 を解決します。