fieldset no puede ser flexbox container
Recientemente, me he encontrado intentando maquetar un formulario con dos input
, que:
- Deben tener una anchura mínima (en este caso 120 píxeles).
- Si es posible, ambos deberán ir en la misma línea. Si no, irá cada uno en una línea propia.
- En todo caso deberán crecer para ocupar todo el espacio horizontal disponibile.
Un caso sencillo, usando flex-wrap
y flex-grow
, ¿verdad?:
Sin embargo, verás que la demo no funciona como se espera, si la ves desde uno de estos navegadores:
Chrome
Edge
Samsung Internet
UC Browser
<fieldset> <input type="text"> <input type="text"> </fieldset>
fieldset { display: flex; flex-wrap: wrap; } input { width: 120px; flex-grow: 1; }
Desgraciadamente, hay ciertos elementos, entre ellos fieldset
, en los que display:flex
no se aplica correctamente.
Solución: tan simple como añadir un elemento extra, que utilizaremos como contenedor flexbox:
<fieldset> <div class="input-group"> <input type="text"> <input type="text"> </div> </fieldset>
fieldset {} .input-group { display: flex; flex-wrap: wrap; } input { width: 120px; flex-grow: 1; }