Flexbox does not take up full height in IE
child
divs don't accept div 100%
height flex-wrap
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>
+3
source to share
2 answers
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 the border treated as part height
.
+3
source to share
This is a flexbox info issue, however one solution is to fix it with jquery. Something like this 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>
0
source to share