Flexbox并没有在IE中占据全部空间

Question

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

将function myFunction() { //work here }; $('.edits').click(function (event) { myFunction(); //do more here... }); $('.edits2').click(function (event) { myFunction(); //do more here... }); 添加到您的flex-items。

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

Answer 2

这是flexbox的一个已知问题，但其中一个解决方案是使用jquery修复它。这样的事情应该有效。

＆＃13;

＆＃13;

$(document).ready(function(){
	var heightBox =  0;
	$('.child').each(function(){
	if($(this).height()>heightBox){
		heightBox=$(this).height();
		}
	});
	$('.child').height(heightBox);
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;