添加内联块div将父级移动到屏幕底部

Question

我有2个div（.showcase，.highlight）嵌套在position: relative的元素中：

我想在导航菜单的.contentContainer左侧有一个边距（23.79％）。然后我想在contentContainer div中的2个div，它们扩展了屏幕的整个高度，无论它们的内容如何。然后我想在这两个div中添加内容。

<div id="App">
  <div data-reactroot="">
    <div class="navbarContainer">
    </div>
    <div class="contentContainer">
      <div class="showcase">
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
        <div class="thumb"></div>
      </div>
      <div class="highlight"></div>
    </div>
  </div>
</div>

现在，当我向showcase div中添加更多div时，.showcase div会移动到屏幕底部（因此只有.thumb div的100px可见。）。我无法弄清楚我做错了什么。

样式表：

#App {
  background-color: #fff;
  color: $fontC2;
  font-family: 'Roboto';
  min-height: 100vh;
  min-width: 320px;
  position: relative;
}
.contentContainer {
  margin-left: 23.79%;
  width: 76.21%;
  height: 100vh;
  .showcase {
    width: 61%;
    height: 100vh;
    display: inline-block;
    background-color: red;
    top: 0;
    .thumb {
      width: 20%;
      height: 100px;
      background-color: $primaryC3;
      display: inline-block;
    }
  }
  .highlight {
    width: 39%;
    background-color: $primaryC2;
    height: 100vh;
    display: inline-block;
  }
}

这里小提琴： https://jsfiddle.net/2tz9940v/