[Résolu] {flex: 1} et IE

Hello,

D'après les symptômes je me demande si tu ne tombes pas sur un bug connu (avec une description en anglais sur Github).

A priori utiliser

flex: 1 0 0%;

pourrait résoudre le problème (malheureusement je ne connais pas très bien flexbox et suis sous Mac également).

En descendant un peu sur la page flexbugs, le numéro 6 pourrait être une source d'ennui également : la valeur rendue par IE10 pour

flex: 1; 

n'est pas la bonne (en revanche c'est censé être corrigé sur IE11).

J'espère que ces ressources pourront t'aider !

Bonjour,

Il est effectivement possible qu'il s'agisse de ce bug.

Il est également possible que ce soit dû à la modification de la propriété min-width/height : depuis quelques versions de flexbox, les éléments ont une valeur de min-width/height intrinsèque équivalente à "auto" et non "0" comme les éléments habituels.

IE10-11 se réfèrent sans doute encore à l'ancienne valeur de 0.

Du coup, en écrivant "flex: 1", cela équivaut :
- à "flex: 1 1 0%" sur IE11
- à "flex: 1 0 0px" sur IE10 (cf. cet autre bug)

Dans les deux cas, la valeur de flex-basis est passée de "auto" à "0". Et si - en plus - la valeur intrinsèque de min-height est de 0 aussi, alors il est tout à fait possible que *tous* tes éléments sauf le footer se voient attribuer une hauteur réelle de 0.

Qu'il s'agisse de ce bug ou bien de celui évoqué par Ten, la solution me semble être la même : attribuer une valeur à flex-basis (auto par exemple).

Et si je puis me permettre, je trouve très risqué de cibler tous les éléments sauf le footer et de leur indiquer une valeur de flex: 1 1 0%.

Bonne chance

@Ten & @Raphael : merci pour vos informations très éclairantes. Le bug était effectivement en lien avec la propriété flex-basis, résolu selon vos conseils :

// *.styl
main
  flex-grow 1 // @note Permet d'appliquer le footer en bas de page si le contenu ne l'atteint pas
  flex-basis auto // @bugfix @affected IE 10-11 @note Valeur initiale à 0 pour ce navigateur

Bonne journée à vous.