Flexbox is not taking full height in IE [duplicate] - html

Question

This question already has answers here:
flex container min-height ignored in IE
(3 answers)
Closed 5 years ago.
child divs are not taking 100% height of flex-wrap div only in IE11.
html,
body {
margin: 0;
padding: 0;
}
.flex-wrap {
display: flex;
display: -ms-flex;
min-height: 100vh;
background: #ddd;
}
.child {
border: 1px solid;
flex: 1 1;
}
<div>
<div class="flex-wrap">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam enim, soluta dolor dolorum debitis eum id architecto iste similique eaque cum saepe, aperiam error reiciendis recusandae incidunt nihil, cupiditate quae.
</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste itaque provident ex debitis numquam minima, ratione quaerat sapiente eveniet cum quia quisquam aut deleniti explicabo ipsam nulla asperiores voluptatum?</div>
</div>
</div>

Answer 1

Add min-height: 100vh to your flex-items.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.flex-wrap {
display: flex;
display: -ms-flex;
background: #ddd;
}
.child {
border: 1px solid;
flex: 1 1;
min-height: 100vh;
}
<div>
<div class="flex-wrap">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam enim, soluta dolor dolorum debitis eum id architecto iste similique eaque cum saepe, aperiam error reiciendis recusandae incidunt nihil, cupiditate quae.
</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste itaque provident ex debitis numquam minima, ratione quaerat sapiente eveniet cum quia quisquam aut deleniti explicabo ipsam nulla asperiores voluptatum?</div>
</div>
</div>
Added box-sizing: border-box; to border considered as part of height.

Answer 2

This is a know issue of flexbox, however one of the solution is to fix it with jquery. Something like that should work.
$(document).ready(function(){
var heightBox = 0;
$('.child').each(function(){
if($(this).height()>heightBox){
heightBox=$(this).height();
}
});
$('.child').height(heightBox);
});
html,
body {
margin: 0;
padding: 0;
}
.flex-wrap {
display: flex;
display: -ms-flex;
min-height: 100vh;
background: #ddd;
}
.child {
border: 1px solid;
flex: 1 1;
}
<div>
<div class="flex-wrap">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam enim, soluta dolor dolorum debitis eum id architecto iste similique eaque cum saepe, aperiam error reiciendis recusandae incidunt nihil, cupiditate quae.
</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque iste itaque provident ex debitis numquam minima, ratione quaerat sapiente eveniet cum quia quisquam aut deleniti explicabo ipsam nulla asperiores voluptatum?</div>
</div>
</div>