Formatting a full-page desktop web app with flexbox - html

Question

I am trying to build a web app that uses full-height and full-width for layout, and I've solved some issues, but this last issue has me stumped and I think it's because I could have done this much more elegantly. I do not care about responsive design for this app.
Essentially this is what I'm looking for: A single page that has two columns, where the left column is narrow and fixed-width, and the right column resizes with the viewport. At the top and bottom of both columns are areas that resize to the content in them, which can change. The content in middle of the columns aligns to the top of the container, and scrolls when it overflows the container.
In this diagram, boxes A and D resize to the content, but are fixed at the top of the page. Boxes C and F likewise resize to what's in them, be stay fixed to the bottom of the page. The content in B and E aligns to the top of those containers, but causes a scrollbar to appear if the content exceeds the height of the box. B and E are the only boxes that should ever scroll. D, E, and F resize horizontally when the window size changes horizontally, but A, B, and C do not. The scrollbars appear in the diagram for explanation purposes, but should only appear in the output if the content exceeds the size of the container (ala overflow: auto).
What I'm looking for in terms of markup is something akin to this, which I haven't been able to get to work the way I want:
html,
body {
height: 100%;
margin: 0px;
}
#page {
display: flex;
height: 100%;
}
#sidebar {
flex: 0 1 250px;
display: flex;
flex-direction: column;
}
#main {
flex: 1;
display: flex;
flex-direction: column;
}
#B,
#E {
flex: 1 0 auto;
display: flex;
flex-direction: column;
overflow: auto;
min-height: min-content;
}
#Bscroll,
#Escroll {
flex: 0 1 auto;
}
<div id="page">
<div id="sidebar">
<div id="A"> A </div>
<div id="B">
<div id="Bscroll">
<p>B</p>
<br><br><br><br><br><br><br><br><br><br><br><br>
<p>B</p>
</div>
</div>
<div id="C"> C </div>
</div>
<div id="main">
<div id="D"> D </div>
<div id="E">
<div id="Escroll">
<p>E</p>
<br><br><br><br><br><br><br><br><br><br><br><br>
<p>E</p>
</div>
</div>
<div id="F"> F </div>
</div>
</div>
What's the magic incantation that will get this to scroll vertically and independently in the B and E areas?

Answer 1

The secret sauce for an element to scroll independently, is give it a fixed height then apply overflow : auto or overflow-y : scroll
header {
height :20vh;
background: red;
}
footer {
height :20vh;
background: green;
}
/*
This is where it happen
Fixed height + overflow : auto
*/
article {
height: 60vh;
overflow: auto;
}
p {
height: 80vh;
}
<header> D </header>
<article>
<p>
( E ) start the scroll
<p/>
<h1>TA DA</h1>
</article>
<footer> F </footer>

Answer 2

You need to add this to A,D,C,F:
#A,#D {
position: sticky;
top: 0;
}
#C, #F {
position: sticky;
bottom: 0;
}
Check out the code snippet here
html,
body {
height: 100%;
margin: 0px;
}
#page {
display: flex;
height: 100%;
}
#sidebar {
flex: 0 1 250px;
display: flex;
flex-direction: column;
}
#main {
flex: 1;
display: flex;
flex-direction: column;
}
#B,
#E {
flex: 1 0 auto;
display: flex;
flex-direction: column;
overflow: auto;
min-height: min-content;
}
#Bscroll,
#Escroll {
flex: 0 1 auto;
}
#A,#D {
position: sticky;
top: 0;
}
#C, #F {
position: sticky;
bottom: 0;
}
<div id="page">
<div id="sidebar">
<div id="A"> A </div>
<div id="B">
<div id="Bscroll">
<p>B</p>
<br><br><br><br><br><br><br><br><br><br><br><br>
<p>B</p>
</div>
</div>
<div id="C"> C </div>
</div>
<div id="main">
<div id="D"> D </div>
<div id="E">
<div id="Escroll">
<p>E</p>
<br><br><br><br><br><br><br><br><br><br><br><br>
<p>E</p>
</div>
</div>
<div id="F"> F </div>
</div>
</div>