Firefox y Flexbox: cuando se usa el espacio blanco: Nower en el elemento infantil se rompe la caja flexible

Question

Eche un vistazo a este jsfiddle en Safari o Chrome, luego en Firefox: http://jsfiddle.net/brandondurham/lrjhm/

Cómo se ve en Webkit: http://cloud.smallparade.com/b4te

Cómo se ve en Firefox: http://cloud.smallparade.com/b53r

Verá que la caja flexible está rota en Firefox. El más largo de las dos cajas (.left) tiene la propiedad CSS white-space ajustado a nowrap Porque, bueno, no quiero que se envuelva. Esta propiedad única está haciendo que la caja flexible se rompa y se extienda para adaptarse a todo el contenido del .left Div.

¿Alguien más vio este comportamiento? ¿Tienes una solución?

Answer 1

Así es como se supone que debe funcionar. Flexbox distribuye el espacio sobrante después de que se haya calculado el ancho intrínseco de los elementos, no controla el ancho intrínseco de los elementos mismos. Por eso los resultados son no intuitivo Si no establece anchos explícitos en las cosas, aunque el grupo de trabajo está revisando la especificación.

Mi consejo sería Intenta usar display: table; en cambio, aunque puede encontrar algunos problemas similares.

Answer 2

Si bien creo que la respuesta aceptada de Robertc es correcta (en eso es como se supone que funciona la caja Flex). Puede deshabilitar el ancho "intrínseco" del que habla estableciendo ese ancho de la caja explícitamente a 0. De esta manera, solo se tiene en cuenta su distribución especificada de los anchos.

Este comportamiento puede explicarse, porque, cuando establece todos los anchos de la caja en cero, entonces todo el ancho se volverá "restante", por lo que la distribución depende completamente de lo que especifique.

Answer 3

Establecer width: 0 en el elemento y eso se convertirá en su "ancho preferido", y hará que los elementos de texto no envueltos dentro del elemento se comporten correctamente.

http://lists.w3.org/archives/public/www-style/2011jan/0201.html