[解決済み】<fieldset>はなぜフレックスコンテナにできないのですか？

質問

をスタイル付けしようとしました。 fieldset 要素に display: flex と display: inline-flex .

ところが、うまくいかなかった。 flex のような振る舞いをします。 block であり、かつ inline-flex のように振る舞いました。 inline-block .

この現象はFirefoxでもChromeでも起こりますが、不思議なことにIEではうまくいきます。

バグなんでしょうか？を見つけることができませんでした。 fieldset には特別な動作が必要です。 HTML5 も CSSフレキシブルボックスレイアウト のスペックになります。

fieldset, div {
    display: flex;
    border: 1px solid;
}

<fieldset>
    <p>foo</p>
    <p>bar</p>
</fieldset>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

解決方法は？

によると バグ 984869 display: flex がボタン要素に対して機能しない ,

<button> は、純粋なCSSでは（ブラウザが）実装できないので、これらは は、CSSの観点からすると、ちょっとしたブラックボックスです。つまり と同じように反応するとは限りません。 <div> があります。

これはフレックスボックスに限ったことではありませんが、たとえば、次のような場合にスクロールバーを表示しません。 を置くと overflow:scroll としてレンダリングしません。 テーブルの display:table を付けています。

さらに踏み込んで言えば、これは <button> . 考える <fieldset> と <table> も特別なレンダリング動作があります。

data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>

このような場合、Chrome は私たちの意見に同意して flex の表示モードです。(これは、"abc" と "def" が終了しているという事実によって明らかになりました。 が縦に重なっている)。たまたま、あなたが思っているようなことができたということは での期待 <button style="display:flex"> は、おそらく単なる 実装の詳細です。

Gecko のボタン実装では、ハードコードされた <button> (そして <fieldset> , と <table> を特定のフレームクラスを持つものとして（したがって に関係なく、子要素の特定の並べ方を指定します。 display プロパティがあります。

子要素を確実に配置したい場合は、次のようにします。 特定のレイアウトモードをクロスブラウザで使用する場合、最も良い方法は ボタンの内部でwrapper-divを使用する必要があります。 の a <table> または a <fieldset> .

そのため、そのバグは "resolved invalid" としてマークされました。

また バグ 1047590 display: flex; で動作しない。 <fieldset> 現在、未確認です。

グッドニュース : Firefox 46+ は、Flexbox を実装しています。 <fieldset> . 参照 バグ1230207 .