2019/05/18

fieldset no puede ser flexbox container

Recientemente, me he encontrado intentando maquetar un formulario con dos input, que:

  1. Deben tener una anchura mínima (en este caso 120 píxeles).
  2. Si es posible, ambos deberán ir en la misma línea. Si no, irá cada uno en una línea propia.
  3. 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:

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