HTML-компоненты Flex не объединяются в Flex: 1 0 автоматический макет

Я создал целевую страницу с приведенным ниже HTML.

У меня также есть тщательно сконструированный ботинок, показывающий, как именно розовый div расширяется слишком далеко и не закрывает экран, как задумано.

https://www.bootply.com/bYlAS71OWw

У меня есть розовая область, размер которой следует изменить, чтобы занять доступное пространство, заполняя браузер, но не создавая полосу прокрутки.

Похоже, что хлебная крошка и заголовок не вычитаются из общей используемой области.

• heading находится в col и является гибким,
• .breadcrumb гибкий.

На странице создается скроллер для комбинированной высоты заголовка и навигационной крошки.

<app-dashboard>
  <div class = "app-body">

    <main class = "main">
      <ol class = "breadcrumb">
        <li class = "breadcrumb-item">
          <a href = "#/">Home</a>

        </li>
        <li class = "breadcrumb-item active">
          <span tabindex = "0">Property Locations</span>
        </li>    
      </ol>

      <div class = "container-fluid d-flex h-100">
        <router-outlet></router-outlet>
        <ng-component class = "d-flex flex-grow w-100">
          <div class = "row w-100">
            <div class = "col">
               HEADING    
            </div>
            <div class = "d-flex flex-grow bg-pink-300 h-100 w-100">
              THIS SHOULD GROW, BUT NOT CREATE A SCROLLBAR
            </div>
          </div>
        </ng-component>
      </div>
    </main>

  </div>
  <footer class = "app-footer">
    <span>
      <a href = "..."></a>Pander.</span>
    <span>
      <i class = "fa fa-fw fa-code-fork"></i>
    </span>
  </footer>
</app-dashboard>

CSS для flex-grow:

.flex-grow {
  flex: 1 0 auto;
}