Flexbox con porcentaje de ancho en Firefox no funciona

Intenté archivar una barra lateral simple | contenido visualmente con flotadores normales y luego usé la técnica clásica para columnas de igual altura con (margin-bottom: -99999px; padding-bottom: 99999px etc.) pero no me gustó y tuve algunos problemas aquí y allá con esto, así que decidí usar flex-box, lo intenté hace algún tiempo con ancho de ancho fijo y funcionó bien pero ahora tengo un ancho de porcentaje, así que parece que a Firefox no le gustó ...Flexbox con porcentaje de ancho en Firefox no funciona

This ejemplo muestra que normalmente esperaba que funcionara flex-box, y lo hizo muy bien en Safari y Chrome, Firefox, sino simplemente ignorar la anchura porcentaje ... me encontré con que it is a known issue de Firefox, pero es un viejo y pensé que lo resolvieron ya ...

Luego probé algo en different para engañar a Firefox, pero aún no era lo que esperaba porque la barra lateral tenía un tamaño diferente de página a página según el contenido ...

Así que termino renunciando a la flex-box con diseño fluido y uso algo más simple que se ajuste a mis necesidades. ..

Pero tengo curiosidad por saber si alguien a resolver este problema con cualquier solución o si todos estamos en la cola para que esto sea fijado por Mozila ...

Gracias!

Fuente

2012-03-05 panosru

columnas falsas podrían ser una solución? http://www.alistapart.com/articles/fauxcolumns/ – fcalderan

es casi el mismo truco que con margin/padding -bottom -/+ 99999px, por lo que le da una apariencia visual de que las columnas tienen la misma altura pero en realidad no las usan 't, flexbox y table son técnicas de igual altura real, pero el problema que estoy describiendo no está relacionado con la columna de igual altura, sino con el hecho de que firefox ignora el ancho porcentual cuando está en el cuadro flexible. – panosru

No recomiendo usar el margin-bottom: -99999px; padding-bottom: 99999px. Si desea un diseño fluido (¿supongo que de eso se trata la pregunta?) Con un 14%, 86% de división, solo use CSS antiguo en lugar de Flex.

http://jsfiddle.net/97dtV/7/

Por qué reinventar la rueda. Si está buscando una mejor forma de diseñar su sitio, pruebe el enfoque de "grilla".

Grid semántica (http://semantic.gs/)
Bootstrap - (http://twitter.github.com/bootstrap/index.html)

Esto supone que usted no necesita flexión por alguna razón específica, si lo hace, entonces ignore esto;). Además, tenga en cuenta la compatibilidad con versiones anteriores cuando use atributos específicos de CSS3.

Fuente

2012-03-05 11:32:19 JustAnotherDeveloper

el problema con el enfoque -/+ 99999px es que necesito tener una barra lateral con 'position: absolute' y esto es algo que debo evitar. – panosru

hmm Podría tener algo como [esto] (http://jsfiddle.net/97dtV/9/) aunque ... bueno, para ser sincero, actualmente uso [esto] (http://jsfiddle.net/97dtV/11/) enfoque y hasta ahora estoy contento con eso ... pero gracias por tu respuesta! – panosru

CSS antiguo sin formato [desciende] (http://jsfiddle.net/mlms13/97dtV/73/) tan pronto como sus columnas no tengan la misma altura. Por eso las personas usan el enfoque -/+ 9999px, o flexbox, o tablas css. Un enfoque de red semántica podría ser la mejor opción, pero es una pena que Flexbox esté tan roto en Firefox. –

Flexbox con porcentaje de ancho en Firefox no funciona

Respuesta

Cuestiones relacionadas