web-dev-qa-db-fra.com

Pourquoi <fieldset> ne peut-il pas être un conteneur flex?

J'ai essayé de styler un élément fieldset avec display: flex et display: inline-flex.

Cependant, cela n'a pas fonctionné: flex s'est comporté comme block et inline-flex s'est comporté comme inline-block.

Cela se produit à la fois sur Firefox et Chrome, mais étrangement, cela fonctionne sur IE.

Est-ce un bug? Je ne pouvais pas trouver que fieldset devrait avoir un comportement spécial, ni dans HTML5 ni dans CSS Flexible Box Layout specs.

fieldset, div {
    display: flex;
    border: 1px solid;
}
<fieldset>
    <p>foo</p>
    <p>bar</p>
</fieldset>
<div>
    <p>foo</p>
    <p>bar</p>
</div>
htmlcsscss3flexbox
157
Oriol

Selon Bogue 984869 - display: flex ne fonctionne pas pour les éléments de boutons ,

<button> n'est pas implémentable (par les navigateurs) en CSS pur, ce qui en fait un peu une boîte noire, du point de vue de CSS. Cela signifie qu'ils ne réagissent pas nécessairement de la même manière que, par exemple. une <div> aurait.

Ce n'est pas spécifique à flexbox - par exemple, nous ne rendons pas les barres de défilement si vous mettez overflow:scroll sur un bouton, et nous ne le rendons pas sous forme de tableau si vous mettez display:table dessus.

Reculant encore plus loin, ceci n'est pas spécifique à <button>. Considérer <fieldset> et <table> qui ont également un comportement de rendu spécial:

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

Dans ces cas, Chrome nous convient et ne tient pas compte du mode d’affichage flex. (Comme le révèle le fait que "abc" et "def" finissent par être empilés verticalement). Le fait qu’ils arrivent à faire ce que vous attendez du <button style="display:flex"> est probablement dû à un détail d’implémentation.

Dans l'implémentation du bouton de Gecko, nous avons hardcode <button> (et <fieldset>, et <table>) comme ayant une classe de cadre spécifique (et donc une manière spécifique de disposer les éléments enfants), quelle que soit la propriété display.

Si vous souhaitez que les enfants soient disposés de manière fiable dans un mode de mise en page particulier en mode multi-navigateur, le mieux est d'utiliser un diviseur-séparateur à l'intérieur du bouton, comme vous en auriez besoin à l'intérieur de une <table> ou une <fieldset>.

Par conséquent, ce bogue a été marqué comme "résolu invalide".

Il y a aussi Bogue 1047590 - display: flex; ne fonctionne pas dans <fieldset> , actuellement "non confirmé".

Bonne nouvelle : Firefox 46+ implémente Flexbox pour <fieldset>. Voir bug 1230207 .

119
Oriol

Je découvre que cela pourrait être un bogue sur Chrome et Firefox où legend et fieldset sont éléments remplacés .

Bugs signalés:

Bug Chrome
Bug Firefox

Une solution de contournement possible:

Une solution possible consisterait à utiliser <div role="group"> en HTML, et application en CSS div[role='group'] comme sélecteur.

16
dippas

D'après mon expérience, j'ai constaté que ni <fieldset>, ni <button>, ni <textarea> peut utiliser correctement display:flex ou des propriétés héritées.

Comme d'autres l'ont déjà mentionné, des bugs ont été rapportés. Si vous souhaitez utiliser flexbox pour contrôler les commandes (par exemple, order:2), vous devez alors envelopper l’élément dans un div. Si vous voulez que flexbox contrôle la disposition et les dimensions réelles, vous pouvez envisager d’utiliser un div au lieu du contrôle de saisie (ce qui pue, je sais).

9
paceaux
<div role="group">
    <p>foo</p>
    <p>bar</p>
</div>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

Peut-être besoin d'utiliser role-group parce que firefox, chrome et je pense que safari a apparemment un bogue avec les fieldsets. Le sélecteur dans le CSS serait simplement

div[role='group'], div {
    display: flex;
    border: 1px solid;
}

Edit: Voici quelques problèmes que d'autres personnes rencontrent également.

Issue 37569

Issue 262679

3
SharpCode