How to wrap by lightgreen color #left "Scrolling Content" container to the bottom of the page when scrolling down? When there is no "Scrolling Content" in the left column it should be also stretched of 100% of page. I think that the right column under fixed container should also follow the same rules.
.wrapper,
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
/* flex-flow: column wrap; */
flex-direction: column;
/* align-items: stretch; */
height: 100%;
}
.top {
height: 60px;
}
.content {
flex-direction: row;
align-items: stretch;
display: flex;
flex: 1;
height: 100%;
}
nav {
height: 60px;
background: tomato;
position: fixed;
top: 0;
width: 100%;
}
#left {
display: flex;
background: lightgreen;
flex: 0 0 40%;
/* justify-content: center; */
flex-direction: column;
/* flex-wrap: wrap; */
}
#left > p {
flex: 1;
}
#right {
display: flex;
flex: 0 0 60%;
}
#fixed {
position: fixed;
background: aqua;
width: 60%;
/* height: 100%; */
}<div class="wrapper">
<div class="top">
<nav role='navigation'>
</nav>
</div>
<div class="content">
<div id="left">
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
</div>
<div id="right">
<div id="fixed">
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
</div>
</div>
</div>
</div>