Pour autant que je sois capable de rassembler mes connaissances, si je travaillais avec IE10 / IE11, je devrais pouvoir utiliser les termes flex standardisés.
J'ai un conteneur div et 2 div enfants.
Les 2 enfants divs ne sont pas plus grandes que 400px, donc il devrait toujours y avoir assez de place pour la justify-content: space-between.
Je veux que le premier enfant soit tout en haut et le deuxième enfant tout en bas.
Cela fonctionne dans Chrome et Firefox mais pas dans IE et je ne sais pas pourquoi.
Tous les commentaires et réactions sont les bienvenus.
<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; background-color: lightyellow;">
<div style="background-color: red;">
<h2>Title (variable height)</h2>
<p>Summary (variable height)</p>
</div>
<div style="background-color: orange;">
<img src="/images/http://avatarbox.net/avatars/img32/tv_test_card_avatar_picture_61484.jpg" />
</div>
</div>https://jsfiddle.net/akxn68vm/
Réponses:
13 pour la réponse № 1IE 10 et 11 ont un certain nombre de problèmes avec le rendu de flexbox correctement.
En voici un: Un conteneur flexible ne respecte pas les min-height propriété dans ces navigateurs.
Une solution simple consiste à faire de votre conteneur Flex également un article Flex.
Ajoutez simplement ceci à votre code (aucune autre modification nécessaire):
body {
display: flex;
flex-direction: column;
}
Plus d'informations: https://github.com/philipwalton/flexbugs#flexbug-3
3 pour la réponse № 2
Selon ce bug IE11 ne rend pas les éléments correctement lorsqu’on utilise min-height dans flexbox.
Il semble que le problème ait été résolu dans Edge, mais IE10-11 ne fonctionnera pas.