¿Por qué <fieldset> no puede ser contenedores flexibles?

Traté de diseñar un fieldsetelemento con display: flexydisplay: inline-flex .

Sin embargo, no funcionó: se flexcomportó como blocky se inline-flexcomportó como inline-block.

Esto sucede tanto en Firefox como en Chrome, pero extrañamente funciona en IE.

¿Es un error? No pude encontrar que fieldsetdebería tener un comportamiento especial, ni en HTML5 ni en las especificaciones de diseño de caja flexible de CSS .

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

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

De acuerdo con el error 984869: display: flexno funciona para elementos de botón ,

<button>no es implementable (por los navegadores) en CSS puro, por lo que son un poco como una caja negra, desde la perspectiva de CSS. Esto significa que no necesariamente reaccionan de la misma manera que, por ejemplo, un lo <div>haría.

Esto no es específico de flexbox, por ejemplo, no representamos barras de desplazamiento si pones overflow:scrollun botón, y no lo hacemos como una tabla si lo pones display:table.

Retrocediendo aún más, esto no es específico para <button>. Considerar <fieldset> y <table> que también tienen un comportamiento de representación especial:

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

En estos casos, Chrome está de acuerdo con nosotros y no tiene en cuenta el flex modo de visualización. (como lo revela el hecho de que "abc" y "def" terminan apilados verticalmente). El hecho de que hacen lo que esperas<button style="display:flex"> probablemente se deba a un detalle de implementación.

En la implementación del botón de Gecko, codificamos <button>(y <fieldset> ,y <table>) como una clase de marco específica (y, por lo tanto, una forma específica de diseñar los elementos secundarios), independientemente de la displaypropiedad.

Si desea que los niños se organicen de manera confiable en un modo de diseño particular en una forma de navegador cruzado, su mejor opción es usar un wrapper-div dentro del botón, tal como lo necesitaría dentro de una <table> oa <fieldset>.

Por lo tanto, ese error se marcó como "resuelto no válido".

También hay un error 1047590: display: flex;no funciona<fieldset> , actualmente "sin confirmar".

Buenas noticias : Firefox 46+ implementa Flexbox para <fieldset>. Ver error 1230207 .

Descubrí que esto podría ser un error en Chrome y Firefox donde legendy fieldsetson elementos reemplazados .

Errores reportados:

Bug Chrome (todavía abierto)
Bug Firefox (corregido desde v46)

Una posible solución alternativa:

Una posible solución sería usar <div role="group">HTML y aplicar CSS div[role='group']como selector.

ACTUALIZAR

En Chrome versión 83 button puede funcionar con display: inline-grid/grid/inline-flex/flex, puedes ver la demostración a continuación:

button {
  display: inline-flex;
  height: 2rem;
  align-items: flex-end;
  width: 4rem;
  -webkit-appearance: none;
  justify-content: flex-end;
}

<!-- 

The align-items keyword should fail in Chrome 81 or earlier, but work in Chrome 83 or later. To see the error, the button needs styles that make it more of an extrinsic container. In other words, it needs a height or width set. 
 
-->
<button>Hi</button>
<input type="button" value="Hi">

Destaque el error de Chrome para aumentar la prioridad del error

Este es un error en Chrome. Agregue una estrella a este problema para aumentar su prioridad a solucionar: https://bugs.chromium.org/p/chromium/issues/detail?id=375693

Mientras tanto, creé estos tres ejemplos de Code Pen para mostrar cómo solucionar el problema. Se crean utilizando CSS Grid para los ejemplos, pero se pueden usar las mismas técnicas para flexbox.

Usando aria-labelledby en lugar de leyenda

Esta es la forma más adecuada de lidiar con el problema. La desventaja es que tiene que lidiar con la generación de ID únicos aplicados a cada elemento de leyenda falso.

https://codepen.io/daniel-tonon/pen/vaaGzZ

<style>
.flex-container {
    display: flex;
}
</style>

<fieldset aria-labelledby="fake-legend">
    <div class="flex-container">
        <div class="flex-child" id="fake-legend">
            I am as good accessibilty wise as a real legend
        </div>

        ...

    </div>
</fieldset>

Usando role = "group" y aria-labelledby en lugar de fieldset y legend

Si necesita el contenedor flexible para poder estirarse a la altura de un elemento hermano y luego también pasar ese estiramiento a sus elementos secundarios, deberá usarlo en role="group"lugar de<fieldset>

https://codepen.io/daniel-tonon/pen/BayRjGz

<style>
.flex-container {
    display: flex;
}
</style>

<div role="group" class="flex-container" aria-labelledby="fake-legend">
    <div class="flex-child" id="fake-legend">
        I am as good accessibilty wise as a real legend
    </div>

    ...

</div>

Crear una leyenda duplicada falsa para propósitos de estilo

Esta es una forma mucho más hacky de hacerlo. Todavía es igual de accesible, pero no tiene que lidiar con ID cuando lo hace de esta manera. El principal inconveniente es que habrá contenido duplicado entre el elemento de leyenda real y el elemento de leyenda falso.

https://codepen.io/daniel-tonon/pen/zLLqjY

<style>
.screen-reader-only {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.flex-container {
    display: flex;
}
</style>

<fieldset>
    <legend class="screen-reader-only">
        I am a real screen-reader accessible legend element
    </legend>

    <div class="flex-container">
        <div class="flex-child" aria-hidden="true">
            I am a fake legend purely for styling purposes
        </div>

        ...

    </div>
</fieldset>

La leyenda DEBE ser un descendiente directo

Cuando intente solucionarlo usted mismo por primera vez, probablemente intente hacerlo:

<!-- DO NOT DO THIS! -->
<fieldset>
    <div class="flex-container">
        <legend class="flex-child">
            Broken semantics legend text
        </legend>

        ...

    </div>
</fieldset>

Descubrirá que funciona, y luego probablemente continuará sin pensarlo dos veces.

El problema es que poner un contenedor div entre el conjunto de campos y la leyenda rompe la relación entre los dos elementos. Esto rompe la semántica del conjunto de campos / leyenda.

Entonces, al hacer esto, has derrotado el propósito de usar el conjunto de campos / leyenda en primer lugar.

Además, no tiene mucho sentido usar un conjunto de campos si no le da una leyenda a ese conjunto de campos.

En mi experiencia, he descubierto que ni <fieldset>, ni <button>, ni <textarea>pueden usar adecuadamentedisplay:flex o heredar propiedades.

Como otros ya han mencionado, se han reportado errores. Si desea utilizar flexbox para controlar el orden (p order:2. Ej. ), Deberá envolver el elemento en un div. Si desea que flexbox controle el diseño y las dimensiones reales, entonces puede considerar usar un div, en lugar del control de entrada (que apesta, lo sé).

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

Es posible que necesite usar role-group porque firefox, chrome y creo que Safari tienen un error con los conjuntos de campos aparentemente. Entonces el selector en el CSS simplemente sería

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

Editar: Aquí hay algunos problemas que otras personas también están experimentando.

Edición 375693

Edición 262679

puedes poner div adicional <fieldset>con los siguientes accesorios:

flex-inner-wrapper {
  display: inherit;
  flex-flow: inherit;
  justify-content: inherit;
  align-items: inherit;
}

Para responder a la pregunta original: sí, es un error, pero no estaba bien definido en el momento en que se hizo la pregunta.

Ahora la representación para el conjunto de campos está mejor definida: https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements

En Firefox y Safari, flexboxde fieldsetahora trabaja. Todavía no en cromo. (Ver https://bugs.chromium.org/p/chromium/issues/detail?id=375693 )

Consulte también https://blog.whatwg.org/the-state-of-fieldset-interoperability para conocer las mejoras realizadas en la especificación en 2018.