如何使用 bootstrap flex 方式使内框占据其父级的全高？ [复制]答案

【问题标题】：How to use the bootstrap flex way to make the inner box take full height of its parent? [duplicate]如何使用 bootstrap flex 方式使内框占据其父级的全高？ [复制]
【发布时间】：2019-05-08 22:28:51
【问题描述】：

我知道一个解决方案是将父元素设置为相对，将子元素设置为绝对。任何人都可以使用更灵活的方式吗？（不要使用绝对）

请不要轻易将问题标记为重复Make flexbox children 100% height of their parent

因为我已经尝试过@David Storey 在该线程中提到的 flex 方式，看来我只能使其在 flex-direction: 行布局中工作，而它不能在我的小提琴中工作（flex-direction: column）布局。

HTML：

<div class="d-flex flex-column h-100">
  <div class="p-2 d1">Flex item 1</div>
  <div class="p-2 d6 flex-grow-1 d-flex position-relative">
    <div class="inner h-100 flex-grow-1">
      background-color: green;
    </div>
  </div>
</div>

CSS：

html,body{
  height: 100%;
}
.d1 {
  background-color: yellow;
}
.d6 {
  background-color: green;
}
.inner {
  background-color: red;
}

fiddle

【问题讨论】：

您可以使用像素或垂直高度 (vh) 设置它。一定是百分比吗？

标签： html css flexbox bootstrap-4

【解决方案1】：

孩子需要将哪个元素设置为100%？因此，您必须将 h-100 设置为父类而不是子类。

h-100

jsfiddle

【讨论】：

实际上，即使我没有将 h-100 添加到父级，我删除了父级中的 h-100，它也可以正常工作。您知道为什么将 h-100 添加到父项中后它的行为不正确吗？ jsfiddle.net/78o54Lmv/3
当您向孩子提供“h-100”时，您基本上是在覆盖 flex-grow 属性，告诉它设置为 100%；它没有参考

【解决方案2】：

如果您给内部盒子的父级指定 100% 的高度，那么内部盒子会拉伸整个高度。

【讨论】：

实际上，即使我没有将 h-100 添加到父级，我删除了父级中的 h-100，它也可以正常工作。您知道为什么将 h-100 添加到父项中后它的行为不正确吗？ jsfiddle.net/78o54Lmv/3
父级必须有 100% 的高度，它也在你的小提琴中。如果从内部移除 h-100，它将拉伸到全高，因为拉伸是 align-items 属性的默认值。请注意，在您的描述中，您正在谈论 flex direction 列，但在您的小提琴中，您在内箱的父级上使用了d-flex（没有flex-column）。
非常感谢您一直以来的帮助。请参阅jsfiddle.net/78o54Lmv/8，我已经从父级中删除了 h-100，它可以工作...
因为最外面的 div 是 flex-colum，而您将第二个子元素设置为 flex-grow-1，它将占用所有可用空间。