Можно ли перекрывать div и сохранять его правила роста и сжатия внутри flex-контейнера?

Question

Я пытаюсь создать перекрывающуюся форму div (синий) с помощью индикатора активности div (желтый). Оба контейнера должны заполнить все доступные пространства родительского div, но желтый (индикатор активности) должен перекрывать синий (форма ввода). Я пытался использовать position: absolute для активности div, но потом я теряю родительскую ширину и высоту. Что я делаю не так и как это можно исправить?

html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: aquamarine;
  display: flex;
  align-items: center;
  justify-content: center;
}

.root-wrapper {
  width: 300pt;
  height: 440pt;
  display: flex;
  flex-direction: column;
  background-color: gray;
}

.logo {
  height: 80pt;
  background-color: green;
}

.content-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background-color: lightcoral;
  padding: 20pt;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.input-form {
  position: relative;
  flex: 1 1 auto;
  background-color: rgb(60, 109, 173);
  z-index: 2;
}

.activity-indicator {
  position: relative;
  flex: 1 1 auto;
  background-color: yellow;
  z-index: 9;
}

<div class="root-wrapper">
  <div class="logo"> </div>

  <div class="content-container">

    <div class="activity-indicator">
    </div>

    <div class="input-form">
    </div>
  </div>

Answer 1

Легким способом было бы подтолкнуть .input-form к:

position: relative;
top: -100px;
margin-bottom: -100px;

html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: aquamarine;
  display: flex;
  align-items: center;
  justify-content: center;
}

.root-wrapper {
  width: 300pt;
  height: 440pt;
  display: flex;
  flex-direction: column;
  background-color: gray;
}

.logo {
  height: 80pt;
  background-color: green;
}

.content-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background-color: lightcoral;
  padding: 20pt;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.input-form {
  position: relative;
  top: -100px;
  margin-bottom: -100px;
  flex: 1 1 auto;
  background-color: rgba(60, 109, 173, .5);
  z-index: 10;
}

.activity-indicator {
  position: relative;
  flex: 1 1 auto;
  background-color: yellow;
  z-index: 9;
}

<div class="root-wrapper">
  <div class="logo"> </div>

  <div class="content-container">

    <div class="activity-indicator">
    </div>

    <div class="input-form">
    </div>
  </div>