Flexbox在IE浏览器中无法充分利用高度。

Question

child divs在IE11中无法完全占据flex-wrap div的100%高度。

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>

- Talent Runners

Answer 1

将 min-height: 100vh 添加到您的 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>

将box-sizing: border-box;添加到将边框视为height的一部分。

- Vadim Ovchinnikov

---

如果没有合适的解决方案，我会考虑将min-height应用到子div上，但这只是最后的选择。 - Talent Runners

@TalentRunners，jQuery解决方案不是最后的选择吗？ :) - Vadim Ovchinnikov

在收到重复的 JQuery 答案后，您的答案似乎是倒数第二个 :D - Talent Runners

我本以为会有我肯定错过的适当解决方案，但没有预料到是jQuery的答案。 - Talent Runners

@TalentRunners 好的，谢谢你的反馈，我已经从我的答案中删除了第二个选项。 - Vadim Ovchinnikov

Answer 2

这是 flexbox 的已知问题，然而其中一种解决方案是使用 jQuery 修复它。类似这样的代码应该有效。

$(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>

- Victor Allegret