Siempre que necesito que dentro de un contendor flex, uno de los hijos tenga un ancho fijo y el otro ocupe el resto del espacio me surge el mismo problema. Parece tan sencillo como ponerle a ese segundo item un flex-basis: auto. Pero sucede que el elemento con ancho automático no siempre entrará en la misma linea.
El otro día, tras darle muchas vueltas sin éxito, le consulté a Nabaroa, una crack que rápidamente me guió hacía la luz: “¿el padre tiene wrap?”
Y es que, aunque podría parecer que el item que tiene ancho automático debería coger el ancho sobrante en la misma linea, resulta que el wrap le hace irse siempre a la siguiente linea.
Al mismo tiempo, si en lugar de un ancho automático le asignamos un porcentaje, si que estará en la misma linea mientras haya espacio suficiente, pero se irá a la siguiente linea antes de lo que podría esperarse. Debería ocupar siempre la misma linea mientras que el ancho fijo del otro elemento no superen el 20% restante, ¿verdad? Pues no, lo baja a la siguiente linea antes de que esto suceda, según lo que he visto. Pero esto, es otra historia a investigar, y tampoco creo necesario hilar tan fino.
El caso es que, la lección aprendida es: si quieres que convivan siempre en la misma linea un elemento de ancho fijo más otro flexible, ponle flex-basis: auto a este último y flex-wrap: nowrap al padre.
Cabe destacar, que el valor por defecto de un contenedor flex es nowrap, sin embargo, yo suelo poner siempre al flex container en wrap por que suele ser más habitualmente necesario que los flex items salten a la siguiente linea cuando no caben. Por lo tanto, si no haces como yo, serás más feliz y no tendrás que cambiarle nada al padre.
¡Mil gracias Nabaroa por mostrarme la luz!
En el siguiente ejemplo se muestra lo que para mi es el ejemplo típico: un figure que queremos que sea circular, con lo cual necesita tener ancho y alto fijos, junto con un texto que ha de ocupar todo el ancho sobrante. Aquí vemos como se comporta en los distintos casos:
See the Pen Flex con algunos anchos fijos by roberto tuñón (@rtunon) on CodePen.