Flexbugs: IE11 ignora el ancho en el elemento flexible anidado
He probado tantas iteraciones de esto... no hay problemas en ff/chrome/safari, pero en IE11 el grupo de objetos 'Element' se convierte en una línea larga.
ayúdame 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
Todos 3 comentarios
IE11 no maneja muy bien flex-basis: auto + flex-grow: 1 cuando el ancho del contenedor no es definitivo. Realmente no he podido concretar un repo + solución consistente, por lo que no lo he documentado.
Esto corrige su sitio:
http://codepen.io/anon/pen/OMLRVN
Además, en el futuro, publique una demostración en lugar de solo el código; de lo contrario, tendré que armarlo y, si no estuviera de buen humor, probablemente no lo habría hecho :)
philipwalton
en 2 dic. 2015
👍29
❤4
🎉4
😄4
👎2
Gracias sinceras. ¡Esto parece que hace el truco!
scjnsn
en 2 dic. 2015
Marcos
zd1010150
en 30 jun. 2017
¿Fue útil esta página
0 / 5 - 0 calificaciones
Temas relacionados
walidvb
·
4Comentarios
markadrake
·
9Comentarios
RwwL
·
5Comentarios
b-strauss
·
3Comentarios
AidaLigia
·
9Comentarios
Comentario más útil
IE11 no maneja muy bien
flex-basis: auto+flex-grow: 1cuando el ancho del contenedor no es definitivo. Realmente no he podido concretar un repo + solución consistente, por lo que no lo he documentado.Esto corrige su sitio:
http://codepen.io/anon/pen/OMLRVN
Además, en el futuro, publique una demostración en lugar de solo el código; de lo contrario, tendré que armarlo y, si no estuviera de buen humor, probablemente no lo habría hecho :)