html - Flexbox 在 IE 中没有占据全高

标签 html css internet-explorer flexbox

<分区>

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>

最佳答案

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

关于html - Flexbox 在 IE 中没有占据全高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45508390/

相关文章:

javascript - Chrome 上的 HTML5 canvas 和 php 无法正常工作

html - IE7 Z-Index 问题(CSS DropDown)

html - 如何在 IE 中将文本包装在 <an> 元素中

javascript - 简单的 jQuery 交替显示/隐藏 div

HTML :first-child not giving desire result

html - Bootstrap 自动高度面板

html - CSS 对齐不起作用

jquery - 单击时替代 SVG 填充颜色

jquery - IE8 jQuery 正在缩短下拉列表的宽度大小

javascript - 不引人注目地设置属性后功能失败