Como posso obter o comportamento do FF 33.x Flexbox em FF 34.x?

Usamos o flexbox muito para um aplicativo de área de trabalho como o aplicativo da Web e ele está funcionando muito bem.

Mas com o mais recente Firefox Developer Edition (35.0a2) o layout não se comporta como esperado (cresce além da viewport): http://tinyurl.com/k6a8jde

Isso funciona bem no Firefox 33.1.

Eu diria que isso tem algo a ver com as alterações do flexbox descritas aqui: https://developer.mozilla.org/pt-BR/Firefox/Releases/34/Site_Compatibility

Mas infelizmente ainda não consigo descobrir uma maneira de obter o comportamento FF 33.x em FF 34 ou 35.x.

Qualquer ajuda sobre o layout ou como isolar melhor o problema é apreciada.

A diferença relevante é o “tamanho mínimo implícito dos itens flexíveis”, um novo recurso na especificação do flexbox. (ou melhor, um recurso que foi removido e reintroduzido)

A maneira mais simples de obter o comportamento antigo é adicionar essa regra de estilo: * { min-height:0 } (ou min-width , se você estava preocupado com estouro em um flexbox horizontal; mas parece que seu testcase só tem problemas com estouro de um contêiner flexível vertical).

Atualizado violino, com essa mudança: http://jsfiddle.net/yoL2otcr/1/

Realmente, você só precisa definir min-height:0 em elementos específicos – em particular, você precisa em cada elemento que:

  1. é filho de um contêiner flexível orientado por colunas

  2. tem um descendente alto, que você deseja permitir o transbordamento (que talvez será manipulado graciosamente por um elemento intermediário com “estouro: rolagem”, como é o caso aqui)

(No seu caso, há realmente uma pilha aninhada desses elementos, já que você tem um único elemento alto dentro de muitos contêineres flexíveis nesteds. Então, você provavelmente precisará de min-height:0 até o final, infelizmente.)

(Se você está curioso, este bug tem mais informações e mais exemplos de conteúdo que foi quebrado na web devido a essa mudança de especificação: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 )

nenhuma dessas correções funcionou para mim, embora funcionem. No meu caso, eu estava fornecendo um display: table-cell fallback de display: table-cell , que parecia estar assumindo. Usando o SASS, incluindo-o assim, o fallback funciona para o IE sem afetar o FF:

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