Why is flexbox creating unused space below my content?

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