firefox - end - ¿Cómo puedo obtener el comportamiento de FF 33.x Flexbox en FF 34.x?

flexbox wikipedia

Question

Utilizamos flexbox en gran medida para una aplicación de escritorio como una aplicación web de aspecto y ha estado funcionando muy bien.

Pero con la última versión de Firefox Developer Edition (35.0a2), el diseño no se comporta como se esperaba (crece más allá de la ventana gráfica): http://tinyurl.com/k6a8jde

Esto funciona bien en Firefox 33.1.

Supongo que esto tiene algo que ver con los cambios de flexbox descritos aquí: https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility

Pero lamentablemente aún no puedo encontrar una manera de obtener el comportamiento FF 33.x en FF 34 o 35.x.

Se agradece cualquier ayuda con respecto al diseño o cómo aislar mejor el problema.

Answer 1

Es más simple que eso Solo dale a los niños flexibles

.flex-child {
  flex: 1;
  overflow: hidden;
}

sin usar min-width: 0 hack

Answer 2

La diferencia relevante es el "tamaño mínimo implícito de los elementos flexibles", una nueva característica en la especificación de flexbox. (o más bien, una función que se eliminó y se reintrodujo)

La forma más simple (más contundente) de restaurar el comportamiento anterior es agregar esta regla de estilo: * { min-height:0 } (o min-width , si estaba preocupado por el desbordamiento en un flexbox horizontal; pero parece que solo su caso de prueba tiene problemas con el desbordamiento de un contenedor flexible vertical).

Violín actualizado, con ese cambio: http://jsfiddle.net/yoL2otcr/1/

Realmente, solo debe establecer min-height:0 en elementos específicos, en particular, lo necesita en cada elemento que:

1. es hijo de un contenedor flexible orientado a ''columnas''

2. tiene un descendiente alto, que desea permitir que se desborde (que tal vez sea manejado con gracia por un elemento intermedio con "desbordamiento: desplazamiento", como es el caso aquí)

(En su caso, en realidad hay una pila anidada de estos elementos, ya que tiene un solo elemento alto dentro de muchos contenedores flexibles anidados. Por lo tanto, es probable que necesite min-height:0 completo, desafortunadamente).

(Si tiene curiosidad, este error tiene más información y más ejemplos de contenido que se rompió en la web debido a este cambio de especificaciones: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 )

Answer 3

ninguna de estas soluciones funcionó para mí, a pesar de que funcionan. En mi caso, estaba suministrando una display: table-cell reserva de display: table-cell , que parecía estar asumiendo el control. Usando SASS, incluyéndolo así, el respaldo funciona para IE sin afectar a FF:

flex: auto; // or whatever   
.ie & {
  display: table-cell;
}