Column row row issue in block in Internet Explorer
You have a problem in Internet Explorer where it doesn't display flex frame items to line up.
Columns seem to work fine in both browsers, but ...
IE 11 seems to truncate lines for no reason? which I can fix by applying flex: 1 0 auto (prevent shrinking) to rows and flex: 1 to columns, but not constant code.
Does it have a fix in IE or am I doing something wrong the way Chrome is doing it correctly, this is my current fix and seems to be a hack to me.
Chromium
IE:
<html>
<body>
<style>
div.form {
display: block;
width: 500px;
height: 500px;
overflow-y: scroll;
}
div.container-row {
display: flex;
flex-direction: column;
background-color: white;
}
div.container-col {
display: flex;
flex-direction: row;
background-color: white;
}
div.field {
display: inline-flex;
flex: 1;
background-color: purple;
padding: 10px;
box-sizing: border-box;
}
div.value {
display: inline-flex;
flex: 1;
background-color: pink;
}
input[type=text] {
width: 100%;
padding: 10px;
}
</style>
<div class="form">
<div class="container-row">
<div class="field">hiiiiiiiidddsssssssdddddddd</div>
<div class="value">
<input type="text" />
</div>
</div>
<div class="container-row">
<div class="field">hiiiiiiiidddsssssssdddddddd</div>
<div class="value">
<input type="text" />
</div>
</div>
<div class="container-col">
<div class="field">hiiiiiiiidddsssssssdddddddd</div>
<div class="value">
<input type="text" />
</div>
</div>
<div class="container-col">
<div class="field">hiiiiiiiidddsssssssdddddddd</div>
<div class="value">
<input type="text" />
</div>
</div>
</div>
</body>
</html>
Fiddle: https://jsfiddle.net/e2jwc371/3/
Cheers for help;)
source to share
When using, flex: 1;
you not only set flex-grow
and flex-shrink
. You also set flex-basis
(relative size between items) to 0% . This is probably confusing IE.
Change the properties flex
to use auto-sizing ( flex: 1 auto;
) and it also works correctly in IE:
...
div.field {
display: inline-flex;
flex: 1 auto;
background-color: purple;
padding: 10px;
box-sizing: border-box;
}
div.value {
display: inline-flex;
flex: 1 auto;
background-color: pink;
}
...
Updated JSFiddle: https://jsfiddle.net/e2jwc371/4/
source to share