Angular Bootstrap4 flex列-无法使子项上下对齐

Question

Angular / flex新手问题...

我正在尝试使用flex设置标准的网页布局，但无法使页面完全占据100％的浏览器高度。

Angular组件html如下：

app.component.html

<div class="container-fluid min-vh-100">
  <div class="row min-vh-100">
    <div class="d-flex flex-column align-items-xl-stretch min-vh-100">
      <app-main-header>
      </app-main-header>
      <app-main-display>
      </app-main-display>
      <app-main-footer>
      </app-main-footer>
    </div>
  </div>
</div>

app-main-header ...

<div style="background: aqua">
  <p style="color: black">Main Header</p>
</div>

app-main-display ...

<div  style="background: chartreuse" >
    Main display area
</div>

app-main-footer ...

<div style="background: bisque" >
  <p style="color: black">Main Footer
  </p>
</div>

我得到的是...

有什么建议吗？ TIA