Align absolute positioned child to a over-hidden relative parent - html

Question

I have this code:
<div id="main_wrapper" style="width: 80vw; overflow: hidden;">
<div id="inner_wrapper" style="position: relative;">
<div id="red" style="background-color: red;width: 20vw;height: 100px;position: absolute;left: 80vw;"></div>
<div id="blue" style="background-color:blue; height:100px; margin: 0px 1% 0px 1%;"></div>
</div>
</div>
Here is the js-fiddle: https://jsfiddle.net/omriman12/msrpwnym/1/
Basically the main_wrapper over-hidden's inner_wrapper, and what i want to do is to align red to the right of blue element.
My problem is that red gets over-hidden when i use relative.
I must keep it relative! This is part of the question, dont change the structure!
Here is what i am actually trying to create:

Answer 1

Try this. The problem is that you set #main_wrapper to width: 80vw and overflow-x: hidden. That caused any child will be hidden if those children are wider than 80vw. You have to wide #main_wrapper to 100vw and set the width #inner_wrapper with 80vw for displaying child of #main_wrapper.
By the way, you need to dynamically resize the width of #main_wrapper when each row is clicked as below snippet.
$('.row').click(function() {
$(this).toggleClass('selected');
if($(this).hasClass('selected')) {
$('#main_wrapper').width('100vw');
} else {
$('#main_wrapper').width('80vw');
}
});
#main_wrapper{
width: 80vw;
overflow-y: scroll;
overflow-x:hidden;
}
#inner_wrapper{
position: relative;
width: 80vw;
}
#blue{
background-color:blue;
height:100px;
margin: 0px 1% 0px 1%;
}
#red{
background-color: red;
width: 20vw;
height: 100px;
position: absolute;
left: 80vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main_wrapper">
<div id="inner_wrapper" class="row">
<div id="red" ></div>
<div id="blue"></div>
</div>
</div>