JSFiddle - React, Tailwind, and code Playground

HTML

<header>The body &#62; header element; element 2, order: 1;.</header>

<div class="container">
<div id="body">
<main>
<article>
<p>article</p>
<div style="height: 10000px;">10,000px</div>
</article>
</main>
<aside>
<p>&#60;aside&#62;, 100% height only of visible area, it <em>should</em> be <em>100% of total parent height</em>.</p>
<p>How do we make this aside stretch to the bottom of the parent element (when you have scrolled to the bottom).</p>
<p>It's content <em>must</em> scroll with the main element, we may not use <code>position: fixed;</code>.</p>
<p>The aside element must also not have it's own <code>overflow: auto;</code></p>
</aside>
</div>
</div>


<footer>The body &#62; footer element; element 3, order: 3;.</footer>

CSS

* {border: 0; margin: 0; padding: 0;}

.container {
  overflow-y: auto;
}

aside
{
 background-color: #afa;
 order: 2;
 width: 20%;
}

body
{
 display: flex;
 flex-direction: column;
 height: 100%;
}

body > header
{
 align-self: stretch;
 background-color: #faa;
 flex:  0 auto;
 min-height: 56px;
}

body > footer
{
 align-self: auto;
 background-color: #aaf;
 flex: 0 1 auto;
 min-height: 36px;
 order: 2;
}

html {height: 100%;}

main
{
 background-color: #cfc;
 order: 1;
 width: 80%;
}

p {margin: 16px;}

#body
{
 display: flex;
 order: 2;
 overflow: auto;
}