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
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: