Flexbox is not taking full height in IE

Question

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>

Vadim Ovchinnikov · Accepted Answer · 2017-08-08T06:41:04.733

3

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.

edited Aug 08 '17 at 06:41

answered Aug 04 '17 at 13:50

Vadim Ovchinnikov

13,327
5
62
90

I was considering `min-height` to `child` div as last option, if there is not any proper solution. – Talent Runners Aug 04 '17 at 13:54
@TalentRunners And jQuery solution is not the last option?:) – Vadim Ovchinnikov Aug 04 '17 at 13:55
After receiving JQuery answers as duplicate, your answer seems 2nd last :D – Talent Runners Aug 04 '17 at 13:57
I thought there would be any proper solution which I'm defiantly missing, but wasn't expecting jquery answers. – Talent Runners Aug 04 '17 at 13:59
@TalentRunners Updated answer with another option. – Vadim Ovchinnikov Aug 04 '17 at 14:04
Although your first option worked for me but, the second option won't work when div has overflowing (more than it's height) content, see [fiddle](https://jsfiddle.net/rds5se84/). – Talent Runners Aug 08 '17 at 06:29
1

@TalentRunners OK, thanks for your feedback, removed second option from my answer. – Vadim Ovchinnikov Aug 08 '17 at 06:43

score 0 · Answer 2 · answered Aug 04 '17 at 13:45

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>

Flexbox is not taking full height in IE

2 Answers2