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, sí 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 supere el porcentaje 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.
Lección aprendida
Si quieres que convivan siempre en la misma linea un elemento de ancho fijo con otro flexible, ponle flex-basis: auto a este último y flex-wrap: nowrap al padre.
El valor por defecto de un contenedor flex es nowrap, sin embargo, yo tengo la costumbre de poner al flex container en wrap ya que suele ser habitual necesitar que los flex items salten a la siguiente linea cuando no caben, y de ahí venía el problema.
¡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: