Контейнер Bootstrap 4 не принимает полную высоту при использовании в React

Question

Я пытаюсь использовать Bootstrap 4 в React. Как я могу сделать так, чтобы контейнер занимал 100% высоты?

HTML в моем компоненте React:

<div className="container h-100"> 
    <div className="row">
        <div className="col-md-6" />
        <div className="col-md-6" />                               
    </div>
</div>

<div className="filler" />

CSS:

.container {
    background-color: green;
    width: 80%;
    height: 100%;
}

.filler {
    background-color: orange;
    height: 2400px;
}

Я бы хотел, чтобы контейнер (зеленая часть) занимал 100% высоты. В настоящее время он охватывает содержимое (панель навигации, которая была создана как отдельный компонент React).

Изображение

Мне удалось получить контейнеры и элементы div, чтобы получить 100% высоту в обычном Bootstrap html / css. Но когда я вставляю тот же код в свой компонент React, высота не работает. Я могу установить ширину в 80% и высоту в px или vw, но я не могу установить высоту в процентах. Я также попытался использовать flex-container, который не решил проблему.

Буду признателен за любую помощь!