web-dev-qa-db-fra.com

Comment puis-je obtenir FF 33.x Flexbox comportement dans FF 34.x?

Nous utilisons fortement flexbox pour une application de bureau comme une application Web à la recherche et cela fonctionne très bien.

Mais avec la dernière Firefox Developer Edition (35.0a2), la mise en page ne se comporte pas comme prévu (elle se développe au-delà de la fenêtre d'affichage): http://tinyurl.com/k6a8jde

Cela fonctionne bien dans Firefox 33.1.

Je suppose que cela a quelque chose à voir avec les changements flexbox décrits ici: https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility

Mais malheureusement, je ne peux pas encore trouver un moyen d'obtenir le comportement FF 33.x en FF 34 ou 35.x.

Toute aide concernant la mise en page ou comment mieux isoler le problème est appréciée.

firefoxflexbox
37
Timm

La différence pertinente est la "taille minimale implicite des éléments flexibles", une nouvelle fonctionnalité dans la spécification flexbox. (Ou plutôt, une fonctionnalité qui a été supprimée et réintroduite)).

La façon la plus simple (la plus directe) de restaurer l'ancien comportement consiste à ajouter cette règle de style: * { min-height:0 } (ou min-width, si vous craigniez un débordement dans une boîte flexible horizontale; mais il semble que votre testcase ne rencontre que des problèmes de débordement d'un conteneur flexible vertical).

Violon mis à jour, avec ce changement: http://jsfiddle.net/yoL2otcr/1/

Vraiment, vous ne devez définir que min-height:0 sur des éléments spécifiques - en particulier, vous en avez besoin sur chaque élément qui:

  1. est un enfant d'un conteneur flexible orienté "colonne"

  2. a un grand descendant, que vous voulez autoriser à déborder (qui sera peut-être traité avec grâce par un élément intermédiaire avec "overflow: scroll", comme c'est le cas ici)

(Dans votre cas, il y a en fait une pile imbriquée de ces éléments, car vous avez un seul élément haut à l'intérieur de nombreux conteneurs flex imbriqués. Donc, vous avez probablement besoin de min-height:0 tout le long, malheureusement.)

(Si vous êtes curieux, ce bogue contient plus d'informations et plus d'exemples de contenu qui a été cassé sur le Web en raison de ce changement de spécification: https://bugzilla.mozilla.org/show_bug.cgi?id= 104352 )

70
dholbert

aucun de ces correctifs n'a fonctionné pour moi, même s'ils fonctionnent. Dans mon cas, je fournissais un display: table-cell repli, qui semblait prendre le relais. En utilisant SASS, y compris comme ceci, la solution de secours fonctionne pour IE sans affecter FF:

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

C'est plus simple que ça Donnez juste aux enfants flex

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

sans utiliser min-width: 0 pirater

0
Maged Mohamed