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

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

.wrap{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
高度：计算（100vh-80px）；
宽度：70%；
保证金：0自动；
文本对齐：居中；
}
标题{
填充：20px；
背景：#222930；
颜色：#E9E9E9；
高度：125px；
}
页脚{
填充：20px；
背景：#222930；
颜色：白色；
底部：0；
文本对齐：居中；
}
主要{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit-box-flex:1；
-webkit-flex-grow:1；
-ms-flex阳性1例；
柔性生长：1；
背景：#222930；
}
主要内容{
-webkit-box-flex:1；
-webkit-flex-grow:1；
-ms-flex阳性1例；
柔性生长：1；
背景：#222930；
颜色：#E9E9E9；
}
主楼，左边{
宽度：160px；
背景：#222930；
-webkit盒序号组：0；
-网络工具包订单：-1；
-ms弹性订单：-1；
顺序：-1；
颜色：#E9E9E9；
}
梅因，对{
宽度：160px；
背景：#222930；
颜色：白色；
}
@介质（最大宽度：640像素）{
主要{
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-webkit柔性方向：列；
-ms-flex方向：列；
弯曲方向：立柱；
}
主，左，
梅因，对{
宽度：自动；
高度：50px；
}
}

标题
内容
左边
正确的
页脚

添加

弹性收缩：0到
main
对我有效

我已经对这个问题/解决方案做了一个快速的描述

我认为问题源于在
.wrap
元素上设置高度。因此，采用不同的方法可能会更好，我认为不使用
calc（）也可以实现同样的效果也是。
看起来您的flex容器上有一个固定高度：

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

不要使用
height
尝试
minheight
，这将允许容器增长