angular 2 scrollPositionRestoration: «top» не работает, если я не удаляю flex-grow: 1

Question

В моем приложении мне нужен компонент маршрутизации с min-height: 100% (или высота может быть больше 100%, но не меньше).

ЭТО HTML

 <div class="d-flex">
        <header></header>
        <div class="canvas">
            <router-outlet>
            </router-outlet>
        </div>
        <div>
          <footer class="footer"></footer>
        </div>
      </div>

ЭТО CSS

.header {
  flex: 0 1 auto;
}

    .canvas {
      display: flex;
      flex-direction: column;
      **flex-grow: 1;  ==============> WHEN I REMOVE THIS scrollPositionRestoration: 'top' is working prefectly**
    }

.footer {
  flex: 0 1 60px;
  display: inline;
}

в классе .CANVAS КОГДА Я УДАЛЯЮ flex-grow: 1; затем scrollPositionRestoration: 'top' работает идеально, но тогда контейнер холста не занимает всю доступную высоту страницы.

И

в классе .CANVAS, КОГДА я добавляю flex-grow: 1; , затем восстановление положения прокрутки: «top» работает STOP. но холст занимает всю доступную высоту, которую я хочу. но не могу сделать и то и другое возможным?

Я хочу ОБА. .canvas занимает всю доступную высоту или больше, если высота содержимого превышает доступную (с полосой прокрутки) И scrollPositionRestoration: 'top' при изменении маршрута.