2
ヘッダーとフッターでフレックスボックスの列レイアウトを使用しようとしています。ブラウザが最大化されている間、レイアウトはきれいに見えます。ウィンドウのサイズを変更すると（電話での表示のように）、ブロックをスタックに入れようとしていますが、メインのコンテンツが左の列と重なり、右の列がフッターに重なってしまいます。フレックスボックスのレイアウトが重なっているフッタをモバイルビューで表示し続ける
.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>私は、ページ上でより多くのコンテンツを持っているが、私はそれを貼り付けることが必要で表示されませんでした。 
そしてこれは、それは携帯電話のように見えるものです：：誰もが私が経験していますどのような好奇心旺盛であれば、ここでは限界に達し、それを視覚的には、ある 
私が言ったように、私はにブロックを取得しようとしています上に積み重ねたり、縮小したときにメニューがドロップダウンに変わることもありますが、フッターはまだ重なっています。
いくつかの提案は、私がここで何が欠けているのかわからない、すばらしいでしょう。初めて私はフレックスボックスアプローチを試みています。