IE 10 Flexbox height bug?

Question

I am unable to figure out why IE10 adds extra margin's or height to the green element below.

http://jsfiddle.net/q4ofmfar/

Expected style as displayed by most browsers:

Incorrect style as rendered by IE10.0:

http://jsfiddle.net/q4ofmfar/

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?

Answer 1

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:

#box1 {
  flex: 3;
}
#box2 {
  flex: 2;
}
#box3 {
  flex-grow: 0.25;
}

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center
}
.row > * {
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  margin: 4px;
  padding: 16px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  fustify-content: space-between
}
.row > * > div {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1
}
#box1 {
  -webkit-box-flex: 3;
  -webkit-flex-grow: 3;
  -ms-flex-positive: 3;
  flex-grow: 3;
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  background-color: red;
}
#box2 {
  -webkit-box-flex: 2;
  -webkit-flex-grow: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  background-color: green
}
#box3 {
  -webkit-box-flex: .25;
  -webkit-flex-grow: .25;
  -ms-flex-positive: .25;
  flex-grow: .25;
  -webkit-flex-basis: 173px;
  -ms-flex-preferred-size: 173px;
  flex-basis: 173px;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background-color: blue
}

<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>

Feel free to modify those numbers to adjust the result to the desired one.

Answer 2

-ms-flex-preferred-size:495px; should be -ms-flex-preferred-size:173px;

Answer 3

Still can't comment (which is kind of backwards, imo, but whatever)

but could it be related to

#box2{...
 -ms-flex-preferred-size:495px;
  flex-basis:495px;
}

#box3{
  -ms-flex-preferred-size:173px;
  flex-basis:173px;
}