Looking at the image below, I have set up a flexbox layout with a sidebar on the left, a main area in the center, and a small login area to the right.
The fixed heights are as follows: the left sidebar is 600px, the main area is 100vh, and the right sidebar is 200px.
My question is whether it's possible to use flexbox to fill the blank space on the right, below the green area, with the content from the main area. Is this achievable with flexbox or should I consider a different approach for this layout?
I essentially want the red content from the main area to flow beneath the green area.
https://i.sstatic.net/4fii3.png
.main {
display: flex;
flex-wrap: wrap;
border: 0px solid black;
height: 100vh;
}
.sidebar {
background: #F1F1F9;
flex: 1;
height: 600px;
}
.mainArea {
flex: 3;
background: red;
}
.rightSidebarSmall {
flex: 1;
background: green;
height: 200px;
}<link href="//fonts.googleapis.com/css?family=Raleway:300,400,600,700" rel="stylesheet">
<div class="main">
<div class="sidebar">
<div class="logo">
<img src="img/sound-wave-icon.png" height="100px" width="140px">
</div>
<div class="selectorBar">
</div>
<div class="menu">
<ul class="menuOptions">
<li>Recent Files</li>
<li>Projects</li>
<li>Teams</li>
<li>Archives</li>
</ul>
</div>
<div class="addButton">
plus icon button
</div>
<div class="progressBar">
uploading 30 files <br> progressBar <br> 7.2mbps 15 secs remaining
</div>
</div>
<div class="mainArea"></div>
<div class="rightSidebarSmall"></div>
</div>