Flexbox布局在移动视图中保持重叠页脚

Question

我正在尝试使用带有页眉和页脚的flexbox列布局。浏览器最大化时，布局看起来很干净。当你调整窗口大小时（比如在手机上查看）我试图让块堆叠，但主要内容与左列重叠，右列与页脚重叠。

.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>

我在页面上有更多内容，但我认为没有必要粘贴它。如果有人好奇我正在经历的事情，这里有一个最大化的视觉效果： 这就是它在手机上的样子：

就像我说的那样，我试图让这些块叠加在一起，或者甚至在缩小时将菜单调到下拉，但页脚仍然重叠。

有些建议很棒，不知道我在这里缺少什么。我第一次尝试使用flexbox方法..

Answer 1

看起来你的Flex容器有一个固定的高度：

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

而不是height尝试min-height，这将允许容器增长。

Answer 2

flex-shrink: 0;添加main对我有效。

我已快速解决了问题/修复问题http://codepen.io/anon/pen/eZXJop。

我认为问题源于在.wrap元素上设置高度。因此，以不同的方式做到这一点可能会更好，我认为你也可以在不使用calc();的情况下实现相同的目标。