Как вырастить родительский рост div на основе абсолютного роста ребенка

Question

Я пытаюсь добиться следующего макета в приложении Gatbsy (React). Я так выгляжу. Проблема в том, что белый квадрат в зависимости от содержимого будет меняться по высоте. Если эта высота изменяется, высота синего также должна измениться. Страница должна всегда выглядеть как прикрепленная картинка, то есть независимо от высоты белого квадрата, она всегда должна быть немного выше синего квадрата.

Я использую Sass ( S CSS).

CodePen: https://codepen.io/devpato/pen/ZEYwexw

CSS

 .header, .footer {
      width: 100%;
      height: 200px;
      background-color: green;
    }

    .blue {
      position: relative;
      /* Height can't have a set value */
      height: 400px;
      background-color: blue;
      width: 100%;

      .white {
      height: 400px;
      position: absolute;
      background-color: white;
      left: 0;
      right: 0;
      margin: 0 auto;
      top: -24px;
      width:  80%;
     }
    }

HTML

<div class="container">
  <div class="header"></div>
  <div class="blue">
       <div class="white"></div>
  </div>
  <div class="footer"></div>
</div>

Answer 1

Затем просто удалите родительский рост, оставьте дочерний рост и установите его как относительное, как показано ниже:

.blue {
  position: relative;
  /* Hight can't have a set value */
  /*height: 400px;*/
  background-color: blue;
  width: 100%;
  .white {
    height: 400px;
    position: relative;
    background-color: white;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -24px;
    width:  80%;
 }
}

Также см. Здесь: codepenexample

Answer 2

Удалите высоту из родительского и добавьте относительное положение в дочернем элементе вместо абсолютного

.blue {
  position: relative;
  background-color: blue;
  width: 100%;
  .white {
  height: 400px;
  position: relative;
  background-color: white;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -24px;
  width:  80%;
 }
}