Eu tentei tantas iterações disso... não há problemas em ff/chrome/safari, mas no IE11 o grupo de objetos 'Element' se torna apenas uma longa linha.
Me ajude 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>
O IE11 não lida muito bem com flex-basis: auto
+ flex-grow: 1
quando a largura do container não é definida. Eu não consegui realmente definir um repositório consistente + solução alternativa, então não o documentei.
Isso corrige seu site:
http://codepen.io/anon/pen/OMLRVN
Além disso, no futuro, por favor, poste uma demonstração em vez de apenas código, caso contrário, tenho que montá-lo e, se não estivesse de bom humor, provavelmente não o teria feito :)
Obrigado sincero. Isso parece que faz o truque!
marca
Comentários muito úteis
O IE11 não lida muito bem com
flex-basis: auto
+flex-grow: 1
quando a largura do container não é definida. Eu não consegui realmente definir um repositório consistente + solução alternativa, então não o documentei.Isso corrige seu site:
http://codepen.io/anon/pen/OMLRVN
Além disso, no futuro, por favor, poste uma demonstração em vez de apenas código, caso contrário, tenho que montá-lo e, se não estivesse de bom humor, provavelmente não o teria feito :)