如何使用bootstrap flex方式使内部盒子充分利用其父级的高度?[复制品]

我知道解决方案是将父元素设置为相对元素,将子元素设置为绝对元素。 有人能用更灵活的方式吗?(不要使用绝对值)

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

因为我尝试了@david storey在该线程中提到的flex方式,所以我似乎只能使它在flex-direction:row布局中工作,而不能在我的fiddle(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