adding inline-block divs moves parent to the bottom of the screen - html

Question

I have 2 divs (.showcase, .highlight) nested inside an element with position: relative:
I would like to have a margin on the left of the .contentContainer for the navigation menu (23.79%). Then I would like 2 divs inside the contentContainer div that extend the whole height of the screen, regardless of their content. Then I would like to add content inside those two divs.
<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>
Now when I add more divs into my showcase div, the .showcase div gets moved to the bottom of the screen (so only the 100px of the .thumb divs are visible.). I can't figure out what I am doing wrong.
Stylesheet:
#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;
}
}
Fiddle here:
https://jsfiddle.net/2tz9940v/