I am unable to figure out why IE10 adds extra margin's or height to the green element below.
Expected style as displayed by most browsers:
Incorrect style as rendered by IE10.0:
HTML
<div class="row">
<div id="box1">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus vehicula lobortis. Vestibulum et justo porttitor, suscipit sapien sed, fermentum magna.
</div>
</div>
<div id="box2">
<div>
Phasellus venenatis mauris libero, in maximus odio blandit eu. Suspendisse in purus sed.
</div>
</div>
<div id="box3">
<div>
Quisque egestas feugiat ante, eget congue metus.
</div>
</div>
</div>
CSS
.row{
display:-ms-flexbox;
display:flex;
-ms-flex-pack:justify;
justify-content:space-between;
-ms-flex-align:center;
align-items:center;
}
.row>*{
-ms-flex-negative:1;
flex-shrink:1;
margin:4px;
padding:16px;
display:-ms-inline-flexbox;
display:inline-flex;
-ms-flex-align:center;
align-items:center;
justify-content:space-between;
}
.row>*>div{
-ms-flex-positive:1;
flex-grow:1;
-ms-flex-negative:1;
flex-shrink:1;
}
#box1 {
-ms-flex-positive:3;
flex-grow:3;
background-color:red;
}
#box2 {
-ms-flex-positive:2;
flex-grow:2;
-ms-flex-preferred-size:495px;
flex-basis:495px;
background-color:green;
}
#box3{
-ms-flex-positive:1;
flex-grow:1;
-ms-flex-preferred-size:173px;
flex-basis:173px;
-ms-flex-negative:0;
flex-shrink:0;
background-color:blue;
}
Does anyone know the cause or solution?
Yes, it's a bug, and it's fixed on IE11.
To solve it on IE10 you can try the following, the result won't be exactly the same, but close enough:
Feel free to modify those numbers to adjust the result to the desired one.