Why is flexbox creating unused space below my content? - html

Question

I have some slides where I'm trying to equally space content using display: flex but it's adding a large empty area below my content and above the navigation.
When the screen shrinks to the mobile size the empty area becomes much more apparent.
I have no idea why it's doing this, or why switching display: flex to display:table messes things up even more.
After spending two days I've come for some guidance.
Here's a test link to what I have. Click on 1 - 4 to get to a screen using flex.
<div class="slide" id="slide-one" data-slide="1">
<p class="deck">You don’t have to wait until bad weather is imminent to prepare for a power outage. Take some time to get organized with these tips.</p>
<div class="row">
<div class="section" id="emergency-kit">
<div class="rollover center">
<div class="button-container">
<div class="button"></div>
</div>
<div class="text">Create an Emergency Kit</div>
</div>
<div class="container">
<img src="img/emergency-kit.png" alt="" />
</div>
</div>
<div class="section" id="food-prep">
<div class="rollover center">
<div class="button-container">
<div class="button"></div>
</div>
<div class="text">Prep Your Food</div>
</div>
<div class="container">
<img src="img/fridge.png" alt="" />
</div>
</div>
</div>
</div>
.row {
display: flex;
width:100%;
flex-direction: row;
margin-top: 20px;
}
#emergency-kit {
width:40%;
display: inline-block;
.container {
max-width: 263px;
}
}
#food-prep {
width:40%;
display: inline-block;
.container {
max-width: 167px;
}
}
Also, using flexslider for the slideshow animations.

Answer 1

The source of the gap has nothing to do with flexbox. Your flex container (.row) is nested within a larger container.
div.row
... is a descendant of div.flex-viewport
... which takes up all the height to the bottom navbar.
On the smaller screen, div.row isn't even a flex container anymore. It's switched to a block element:
Possible options for closing the gap:
Reduce the height of one of the containers
Define heights for all container elements between .flex-viewport and .row
Apply display: flex to all containers, so children can expand the full height of their parent