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;
}