'Holy Grail' with CSS and inner scrolling - html

Question

What is the best way to achieve this layout:
I believe that this HTML is good, I just need the CSS:
<div>
<header style="background:blue"></header>
<div>
<nav>
<header style="background:darkgreen"></header>
<ul style="background:green">...</ul>
</nav>
<div>
<header style="background:darkred"></header>
<main style="background:red"></main>
</div>
</div>
</div>
I've tried flexbox, but I'm finding myself doing weird css calc() to get the green and red div's to stretch to the bottom.
(I'm looking for a modern, solid way- not hacks)

Answer 1

I am not sure how to do with your HTML. And not sure what you mean by Holy Grail. I just did this, with semantic tags and which has no hacks, compatible over a range of browsers from Internet Explorer 7:
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
body {
background-color: #fcc;
}
header {
position: fixed;
top: 0;
background-color: #66f;
left: 0;
right: 0;
height: 35px;
line-height: 35px;
}
aside {
position: fixed;
left: 0;
top: 35px;
width: 200px;
bottom: 0;
}
aside header {
position: absolute;
background-color: #f90;
}
aside .content {
position: absolute;
top: 35px;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
background-color: #fc6;
}
main {
margin: 40px 10px 10px 210px;
}
main header {
top: 35px;
left: 200px;
background-color: #f33;
line-height: 20px;
height: 20px;
}
<header>
...
</header>
<aside>
<header>
...
</header>
<div class="content">
<p>Content goes here...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae unde, eligendi dolores laborum aliquid voluptatem ducimus adipisci dolorem quod ipsum corrupti soluta. Eveniet repellendus sed cumque, consectetur eum magni saepe!</p>
<p>Tenetur debitis nemo, itaque ipsa, eum tempore doloribus mollitia quas nulla accusantium unde officia rerum optio quasi a dicta error distinctio iusto, provident deleniti? Commodi perspiciatis qui ratione autem sequi.</p>
<p>Placeat saepe libero sunt cupiditate. Expedita molestias, error sequi mollitia consequatur iste aliquid deserunt deleniti repellat saepe vitae necessitatibus eum. Soluta nemo dicta fugit repellendus! Dignissimos, aliquid. Iusto, voluptatum, voluptatibus.</p>
<p>Sequi eaque officiis ab dolores aliquid, harum, nemo nam et deleniti quo aliquam, placeat, est natus iusto. Impedit assumenda ullam, tempore saepe rem adipisci, id ex, iste, dignissimos doloribus corrupti!</p>
<p>Illum nemo nihil, exercitationem autem ullam, aliquam dolorum inventore laborum quasi similique neque vero aliquid ad perferendis asperiores iusto? Quo autem recusandae, obcaecati iusto quas minus dicta reprehenderit magni quaerat.</p>
<p>Excepturi magnam rerum facere culpa a harum explicabo nostrum aspernatur. Molestiae voluptates exercitationem hic assumenda nesciunt fugit error nemo sapiente nihil consequatur illo omnis ipsum reiciendis, veniam rerum, eaque asperiores!</p>
<p>Iusto fugit mollitia, non deserunt assumenda nobis saepe id, dolorum cum culpa magni ea consectetur odio possimus facere velit voluptatum aperiam quibusdam hic, esse animi debitis. In qui cupiditate iste!</p>
<p>Eveniet nam vero maiores reiciendis totam pariatur magni tempora, rerum magnam ex, blanditiis a, odit labore consectetur ea modi minus dolore aspernatur voluptates. Magnam, hic sed omnis vel delectus? Eligendi.</p>
<p>Eveniet nesciunt laborum a officiis, numquam magnam, incidunt libero unde dolorum voluptatum, ducimus illo in eum reiciendis ad dolor eos consequuntur saepe ex repellat porro quae. Voluptatum architecto cupiditate officia.</p>
<p>Voluptate, voluptatem culpa explicabo distinctio obcaecati quia molestiae blanditiis optio quis nihil, ipsam similique molestias exercitationem quas itaque, dignissimos quisquam modi. Impedit et dolorum, laboriosam modi aliquam dolor quasi possimus!</p>
<p>Ad dolores consequuntur accusantium laborum, provident laudantium quas voluptatibus exercitationem distinctio adipisci, corporis, amet alias optio nisi! Doloremque incidunt debitis molestiae eius similique facere nobis libero esse temporibus quisquam,
aperiam?</p>
<p>Quis accusamus itaque adipisci modi perspiciatis provident suscipit assumenda totam quo placeat reiciendis, nulla ad aperiam nobis sint velit ducimus eos culpa cupiditate in, quod veritatis nihil ut quidem! Ab.</p>
<p>Consequuntur maiores quas alias labore architecto laboriosam nisi voluptatum impedit rem. Doloribus cumque, unde ducimus possimus, voluptate cupiditate veniam est, sequi, libero velit ipsa ab deleniti earum odio? Minus, earum.</p>
<p>Molestiae iusto placeat vitae mollitia maxime ipsa ad in praesentium quasi cupiditate temporibus doloremque numquam, veritatis esse et odio dolores rerum iure alias quis, quisquam, amet maiores. Sequi, eaque reprehenderit.</p>
<p>Qui hic voluptatum adipisci reprehenderit repudiandae, libero illum aliquam iure, dolores tempora, quo consequuntur odit. Exercitationem blanditiis sunt, ea consequuntur, incidunt dolor harum neque fugiat natus tempore assumenda, deleniti dolorem?</p>
</div>
</aside>
<main>
<header>
...
</header>
</main>
Preview

Answer 2

If you want using flex for that do this:
<div style="display:flex;flex-direction:column;height: 100vh;">
<div style="background-color:blue;height:50px;"></div>
<div style="background-color:red;flex:1;display: flex;">
<div style="background-color: green;flex: 1;">
<div style="background-color: darkgreen;height: 80px;"></div>
<div style="overflow-y: scroll;"></div>
</div>
<div style="background-color: red;flex: 2;">
<div id="navBar" style="background-color:darkred;height:40px;"></div>
</div>
</div>
</div>
Sorry my code is not clean.