使用 IE11 时，如何使弹性项目适合其父项的高度？答案

【问题标题】：How can a flex item be made to fit the height of its parent when using IE11?使用 IE11 时，如何使弹性项目适合其父项的高度？
【发布时间】：2017-07-26 23:02:10
【问题描述】：

在下面的示例中，我找不到使用 css flex 模型使 div B 填充 div A 的高度的方法。当flex-direction 为column 时，即使未指定高度，子 div 仍会折叠。

.A {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #00b;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

.B {
  background: #b00;
  -ms-flex: 1 1 0%;
  -webkit-box-flex: 1;
  flex: 1 1 0%;
}

<div class="A">
  <div class="B">
    I WISH I WAS AS BIG AS MY DAD
  </div>
</div>

【问题讨论】：

你必须让父 flex-direction:column...对吗？
这里的问题是min-height...我想。我记得，IE 在 flexbox 和 min-x 方面存在问题。
Column 不能解决这个问题，但是当 flex 是 row 时我需要高度才能工作，就像在表现良好的浏览器中一样。
红色 div 正在接管蓝色 div？（红色在蓝色之上）
OP 可以决定。希望问题解决了。

标签： html css internet-explorer flexbox

【解决方案1】：

根据问题编辑修改答案。

这是 IE 的许多 flex 错误之一，在某些情况下它无法识别其父母的身高。

在这种情况下，当使用具有列方向的 flex 容器时，如果您对 flex-basis 使用 unitless 值，您将在跨浏览器中获得相同的结果。

.A {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #00b;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

.B {
  background: #b00;
  -ms-flex: 1 1 0;
  -webkit-box-flex: 1;
  flex: 1 1 0;
}

<div class="A">
  <div class="B">
    I WISH I WAS AS BIG AS MY DAD
  </div>
</div>

如果唯一的目的是使项目适合其父项的高度，我建议改用普通的flex-grow: 1。

Fiddle demo

堆栈sn-p

.A {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #00b;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

.B {
  background: #f66;
  -ms-flex-grow: 1;
  -webkit-box-flex: 1;
  flex-grow: 1;
}

<div class="A">
  <div class="B">
    I AM AS BIG AS MY DAD
  </div>
</div>

这里也是a fiddle sample，同时显示了行和列的版本。

【讨论】：

谢谢你，但是如果没有像我的第二个例子那样设置高度，它并不能解决问题。有什么想法吗？
@Obsidian 更新了我的答案。
感谢这看起来不错，但是我已经在我的所有 flex 属性中添加了单位，因为 Chrome 不尊重其他值:) stackoverflow.com/questions/37386244/…
感谢您的所有帮助。您已经为我提供了足够的信息来创建可用的解决方案，因此感谢您在其他人没有提供的情况下所做的努力。
@Obsidian 不客气。顺便说一句，我还在我的答案中添加了先前的带有行和列版本的小提琴