In having an issue in Internet explorer where it does not render flex box elements correctly in conjunction to rows.
Columns seem to work fine in both browsers but...
IE seems to be shrinking the rows for no reason? meaning I can fix it by applying flex: 1 0 auto(prevent shrinking) to rows and flex:1 to columns but is not constant code.
Is there a fix to it in IE or am I doing something wrong as Chrome renders it correctly this is my current fix and seems like a hack to me.
Chrome
IE:
<html>
<body>
<style>
div.form{
display:block;
width:500px;
height:500px;
overflow-y:scroll;
}
</style>
<div class="form">
<div style="display:flex;flex-direction:column;background-color:white;">
<div style="display:inline-flex;flex:1;background-color:purple;padding:10px;box-sizing:border-box;">hiiiiiiiidddsssssssdddddddd</div>
<div style="display:inline-flex;flex:1;background-color:pink;">
<input type="text" style="width:100%;padding:10px;"/>
</div>
</div>
<div style="display:flex;flex-direction:column;background-color:white;">
<div style="display:inline-flex;flex:1;background-color:purple;padding:10px;box-sizing:border-box;">hiiiiiiiidddsssssssdddddddd</div>
<div style="display:inline-flex;flex:1;background-color:pink;">
<input type="text" style="width:100%;padding:10px;"/>
</div>
</div>
<div style="display:flex;flex-direction:row;background-color:white;">
<div style="display:inline-flex;flex:1;background-color:purple;padding:10px;box-sizing:border-box;">hiiiiiiiidddsssssssdddddddd</div>
<div style="display:inline-flex;flex:1;background-color:pink;">
<input type="text" style="width:100%;padding:10px;"/>
</div>
</div>
<div style="display:flex;flex-direction:row;background-color:white;">
<div style="display:inline-flex;flex:1;background-color:purple;padding:10px;box-sizing:border-box;">hiiiiddssdddddddd</div>
<div style="display:inline-flex;flex:1;background-color:pink;">
<input type="text" style="width:100%;padding:10px;"/>
</div>
</div>
</div>
</body>
</html>
Fiddle: http://ift.tt/1JyBKOz
Cheers for the help ;)
Aucun commentaire:
Enregistrer un commentaire