Переполнение свитка с относительной высотой не работает

Question

Я хочу, чтобы мой div занимал оставшееся место и был прокручиваемым. Для полного контекста я использую angular, а вот мой app.component.html

<div class="vh-100">
    <div class="d-flex flex-column h-100">
        <app-navbar></app-navbar>
        <div class="flex-grow-1">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

и его дочерний компонент

<div class="d-flex flex-column h-100">
    <h1 class="font-weight-light text-center">Gallery</h1>
    <hr class="m-2" />
    <div class="flex-grow-1">
        <div id="gallery" class="h-100 overflow-scroll">
        </div>
    </div>
</div>

Он размещен красиво, однако, когда содержимое галереи становится больше вместо возможности прокрутки внутри него, оно выталкивает мою страницу и расширяет галерею div. Изменение высоты галереи на постоянное помогает, но оно должно занимать оставшееся пространство. Как я могу это сделать?