Stacking columns horizontally on wider screens and vertically on smaller screens - html

Question

I'm trying to accomplish the following. I've dumbed it down for purposes of demonstration:
A page with a header, a footer, and 2 columns
The header is always on top (i.e., vertically above the rest of the content) with height 20px
The footer is always at the bottom (i.e., vertically below the rest of the content) with height 20px.
In between, there are 2 columns
If the viewport is wide enough, the 2 columns are presented side by side, and everything fits inside the viewport. Column A takes 75%, Column B 25%. Each is (100% - 40px) tall
If the viewport is not wide enough, the 2 columns are presented on top of each other, each 100% wide. Column A is still (100%-40px) tall, column B has a height to fit its content. The page is now more than 1 viewport tall (with the header visible when scrolling all the way up, and the footer visible when scrolling all the way down)
If content does not fit a column, a scroll bar should appear inside the overflowing column
I've accomplished all points except number 6 here
I cannot got number 6 to work. I've tried min-width. I've also tried to 'port' the whole thing to bootstrap (I'm using bootstrap elements on the page already) but that doesn't work nicely with some angular components (that need to poll their parent's size; for some reason the element then keeps growing)
I'd be grateful for good ideas!
edit
I've tried using flexboxes. It's closer, but the viewport doesn't scroll when it gets too narrow... ideas? https://jsfiddle.net/498xpp6n/2/
edit
I've thought about it some more, and made a little change to the wanted column heights when going into stacked mode. Hope that doesn't ruin someone's day

Answer 1

The layout is possible with flexbox. This is all you need:
HTML
<div id="outer-flex-container"><!-- primary flex container -->
<div id="header">The Header The Header The Header ... </div><!-- flex item #1 -->
<div id="inner-flex-container"><!-- flex item #2 -->
<div id="mainpanel">Mainpanel Mainpanel Mainpanel Mainpanel Mainpanel ... </div>
<div id="aside">settings settings settings settings settings settings ... </div>
</div><!-- end #inner-flex-container -->
<div id="footer">The Footer The Footer The Footer ... </div><!-- flex item #3 -->
</div><!-- end #outer-flex-container -->
CSS
html { height: 100%; }
body { height: 100%; margin: 0; }
#outer-flex-container {
display: flex;
flex-direction: column;
height: 100%;
}
#inner-flex-container {
display: flex;
height: calc(100% - 40px);
}
#header { height: 20px; }
#footer { height: 20px; }
#mainpanel { flex: 0 0 75%; }
#aside { flex: 1; overflow-y: scroll; }
#media screen and ( max-width: 500px) { #inner-flex-container { flex-direction: column; } }
I believe the code above covers all seven points in your question :-)
DEMO
UPDATE (based on comments)
HTML
<div id="outer-flex-container"><!-- primary flex container -->
<div id="header">The Header The Header The Header ... </div><!-- flex item #1 -->
<div id="inner-flex-container"><!-- flex item #2 -->
<div id="mainpanel">Mainpanel Mainpanel Mainpanel Mainpanel Mainpanel ... </div>
<div id="aside">settings settings settings settings settings settings ... </div>
<div id="footer">The Footer The Footer The Footer ... </div>
</div><!-- end #inner-flex-container -->
</div><!-- end #outer-flex-container -->
Notes:
moved footer into .inner-flex-container
now only two primary flex items
three inner flex items
CSS
body { margin: 0; }
#outer-flex-container {
display: flex;
flex-direction: column;
}
#inner-flex-container {
display: flex;
flex-wrap: wrap;
}
#header { height: 20px; }
#mainpanel {
flex: 0 0 75%;
height: calc(100vh - 40px);
min-height: calc(100vh - 40px);
overflow-y: auto;
}
#aside {
flex: 0 0 25%;
height: calc(100vh - 40px);
overflow-y: auto;
}
#footer {
flex-basis: 100%;
height: 20px;
}
#media screen and ( max-width: 500px) {
#inner-flex-container { flex-direction: column; }
#mainpanel { height: 100vh; }
#aside { height: auto; }
}
Notes:
removed fixed heights (was limiting footer positioning on smaller screens)
added footer to inner flex container so it's always below content columns
Revised Demo