Flexbox 在 IE 中没有占据全部高度 [重复]

Question

child div 仅在 IE11 中不会占用100% 的高度 flex-wrap div。

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

这是 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>

Answer 2

将min-height: 100vh 添加到您的弹性项目中。

* {
  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 一部分的边框。