IE 10，div不占用100％的高度

Question

我有一个使用display:table-row的div结构，最后一行设置为获得剩余高度（100％）。这适用于Chrome，Firefox和IE 11，但不适用于IE10。我在这里做错了吗？ Here is the jsfiddle

 <div class="parent">
            <div class="child">1</div>
            <div class="child">2</div>
            <div class="child">
                <div class="childTwo">
                    <div class="childTow-extra">132</div>
                </div>
            </div>
    </div>

html, body{
    height: 100%;
}
.parent{
    height: 100%;
    width: 100%;
    display: table;
}
.child{
    display: table-row;
}
.parent .child:nth-child(1){
    height: 100px;
    background: #ccc;
}
.parent .child:nth-child(2){
    height: 100px;
    background: #ddd;
}
.parent .child:nth-child(3){
    height: 100%;
    background: #555;
    margin: 10px;
}
.childTwo{
    height: 100%;
    background: red; 
}
.childTow-extra{
    height: 100%;
    background: blue;

}