Как сделать несколько футеров у флексбокса?

Здравствуйте, уважаемые.
Не могу никак придумать, как сделать следующее:

Суть в том, что если контента мало, то футер 1 коричневого блока и футер 2 оранжевого блока прилеплены к низу экрана, но если контента очень много, то чтобы было, как на картинке справа.
Перепробовал множество вариантов, но наиболее близким было

<div class="h-100 d-flex flex-column align-items-stretch">
  <div class="flex-grow-1 h-75">
    <div class="h-100 d-flex flex-column align-items-stretch">
      <div class="flex-grow-1 h-100">Content</div>
      <div>Footer 2</div>
    </div>
  </div>
  <div>
    Footer 1
  </div>
</div>

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

Заранее благодарен за ответы.