Flexbox layout keeps overlapping footer in mobile view

Question

I'm attempting to use a flexbox column layout with header and footer. While the browser is maximized, the layout looks clean. When you resize the window (like viewing on a phone) I'm trying to get the blocks to stack, but the main content overlaps the left column and the right column overlaps the footer.

.wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: calc(100vh - 80px);
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
header {
  padding: 20px;
  background: #222930;
  color: #E9E9E9;
  height: 125px;
}
footer {
  padding: 20px;
  background: #222930;
  color: white;
  bottom: 0;
  text-align: center;
}
main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  background: #222930;
}
main .content {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  background: #222930;
  color: #E9E9E9;
}
main .left {
  width: 160px;
  background: #222930;
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
  -ms-flex-order: -1;
  order: -1;
  color: #E9E9E9;
}
main .right {
  width: 160px;
  background: #222930;
  color: white;
}
@media (max-width: 640px) {
  main {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  main .left,
  main .right {
    width: auto;
    height: 50px;
  }
}

<div class="wrap">
  <header>header</header>
  <main>
    <div class="content">content</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </main>
  <footer>footer</footer>
</div>

I have more content on the page, but I didn't see it necessary to paste it. If anyone is curious what I am experiencing, here is a visual of it maxed: And this is what it looks like on a phone:

Like I said, I'm trying to get the blocks to stack on top of each other, or even make the menu turn in to a drop down when scaled down, but the footer still overlaps.

Some suggestions would be great, not sure what I'm missing here. First time I'm trying a flexbox approach..

Answer 1

It looks like you have a fixed height on your flex container:

.wrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);    /* fixed height */
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

Instead of height try min-height, which will allow the container to grow.