Flexbugs: IE11 Ignore la largeur sur l'élément flexible imbriqué
J'ai essayé tellement d'itérations de ceci... il n'y a aucun problème dans ff/chrome/safari, mais dans IE11, le groupe d'objets 'Element' devient juste une longue ligne.
Aidez-moi obi-wan?...
<html ><body>
<style>
.outer-rowwrap{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;max-width:1200px;height:100%;background-color:#f0f0f0;}
.inner-rowwrap{display:flex;flex-direction:row;flex-wrap:wrap;}
.nested-element{width:100px;text-align:center;border:1px solid #333;margin:5px;}
.nogrow{flex-grow:0;flex-shrink:0;flex-basis:auto;}
.grow1{flex-grow:1;flex-shrink:1;flex-basis:auto;}
</style>
<div class="outer-rowwrap">
<div class="nogrow" style="width:200px;background-color:#ccc;">column here</div>
<div class="grow1">
<div class="inner-rowwrap">
<div class="nogrow"><div class="nested-element">Element</div></div>
<div class="nogrow"><div class="nested-element">Element</div></div>
<div class="nogrow"><div class="nested-element">Element</div></div>
<div class="nogrow"><div class="nested-element">Element</div></div>
<div class="nogrow"><div class="nested-element">Element</div></div>
<div class="nogrow"><div class="nested-element">Element</div></div>
<div class="nogrow"><div class="nested-element">Element</div></div>
<div class="nogrow"><div class="nested-element">Element</div></div>
<div class="nogrow"><div class="nested-element">Element</div></div>
<div class="nogrow"><div class="nested-element">Element</div></div>
<div class="nogrow"><div class="nested-element">Element</div></div>
<div class="nogrow"><div class="nested-element">Element</div></div>
<div class="nogrow"><div class="nested-element">Element</div></div>
<div class="nogrow"><div class="nested-element">Element</div></div>
<div class="nogrow"><div class="nested-element">Element</div></div>
<div class="nogrow"><div class="nested-element">Element</div></div>
</div>
</div>
</div>
</body>
</html>
scjnsn
👍2
Tous les 3 commentaires
IE11 ne gère pas très bien flex-basis: auto + flex-grow: 1 lorsque la largeur du conteneur n'est pas définie. Je n'ai pas été en mesure de vraiment définir un dépôt cohérent + une solution de contournement, donc je ne l'ai pas documenté.
Cela corrige votre site :
http://codepen.io/anon/pen/OMLRVN
De plus, à l'avenir, veuillez publier une démo plutôt qu'un simple code, sinon je dois l'assembler et si je n'étais pas de bonne humeur, je ne l'aurais probablement pas fait :)
philipwalton
le 2 déc. 2015
👍29
❤4
🎉4
😄4
👎2
Merci sincèrement. Ça a l'air de faire l'affaire !
scjnsn
le 2 déc. 2015
marque
zd1010150
le 30 juin 2017
Cette page vous a été utile?
0 / 5 - 0 notes
Questions connexes
james-jlo-long
·
6Commentaires
zomigi
·
4Commentaires
markadrake
·
9Commentaires
shans
·
8Commentaires
AidaLigia
·
9Commentaires
Commentaire le plus utile
IE11 ne gère pas très bien
flex-basis: auto+flex-grow: 1lorsque la largeur du conteneur n'est pas définie. Je n'ai pas été en mesure de vraiment définir un dépôt cohérent + une solution de contournement, donc je ne l'ai pas documenté.Cela corrige votre site :
http://codepen.io/anon/pen/OMLRVN
De plus, à l'avenir, veuillez publier une démo plutôt qu'un simple code, sinon je dois l'assembler et si je n'étais pas de bonne humeur, je ne l'aurais probablement pas fait :)