如何根据孩子的绝对身高增加父母身高 div

Question

I'm trying to achieve the following layout in a Gatbsy(React) application. I have looking like that. The problem is that the white square depending on the content the height will change. If this height changes the height of the blue needs to change as well. The page needs to to always look essentially like the picture attach, meaning no matter the height of the white square, it always need to be a little above the blue square.

I'm using Sass(SCSS).

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

Remove the height from parent and add position relative in child instead of absolute

.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%;
 }
}

Answer 2

Then just remove the parent height and keep the child height and set child as a relative like following:

.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%;
 }
}

Also see here: codepenexample