FlexBox Filling blank spaces - html

Question

So in the image below, I created a flexbox for a sidebar, a main area, and then a small area up to the right as a login area.
The first sidebar on the left has a fixed height of 600px, the mainarea in the middle has a height of 100vh, and the right sidebar has a fixed height of 200px.
My questions is if it is possible to fill in the blank space on the right, underneath the green with the main area content with flexbox. Is this possible, or is flexbox not the way to go with this layout?
I essentially want the content my main area red content to flow beneath the green area.
.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 5 files <br> progressBar <br> 9.8mbps 36 secs remaining
</div>
</div>
<div class="mainArea"></div>
<div class="rightSidebarSmall"></div>
</div>

Answer 1

Using CSS Grid is the easiest way to go about this, since the layout you are going for is very unorthodox. With that said, I was able to get a layout that I think fits your description that I put in a Pen.
https://codepen.io/anon/pen/bLjNRO
The gist of it adds:
.main {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.mainArea {
grid-column: 1 / 6;
grid-row: 1;
}
.rightSidebarSmall {
grid-column: 5 / 6;
grid-row: 1;
}

Answer 2

I think it is better if you can make the right sidebar to position absolute. with this your main (red arean) will be cover full with and green area will be overlap on the red area
.main {
display: flex;
flex-wrap: wrap;
border: 0px solid black;
height: 100vh;
position:relative;
}
.sidebar {
background: #F1F1F9;
flex: 1;
height: 600px;
}
.mainArea {
flex: 3;
background: red;
}
.rightSidebarSmall {
position:absolute;
right:0;
top:0;
z-index: 10;
min-width:100px;
height:200px;
background:green;
}
<div class="main">
<div class="sidebar"></div>
<div class="mainArea"></div>
<div class="rightSidebarSmall"></div>
</div>
Hope it will help you :)

Answer 3

Sure, just use float: right Just make sure the floating div is before the rest of your text.
.main {
width: 50vw;
height: 50vh;
position: relative;
}
.inner {
background-color: red;
float: left;
width: 100%;
height: 100%;
word-break: break-all;
}
.other {
background-color: green;
float: right;
max-width: 150px;
}
<div class="main">
<div class="inner">
<div class="other">
another text asdfsdf asdf asdf
</div>
<div>
The quick brown fox The quick brown fox The quick brown fox
</div>
</div>
</div>