IE 10 , div does not take 100% height

Question

I have a div structure which uses display:table-row and the last row is set to get the remaining height(100%) . This works fine in Chrome, Firefox and IE 11 but not in IE10. Am I doing something wrong here ? 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;

}