Faded Faded - 6 months ago 15
HTML Question

Flexbox layout keeps overlapping footer in mobile view

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:
Maximized
And this is what it looks like on a phone:
enter image description here

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

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.