Overflow:scroll property not including background in overflow - html

Question

I have two divs inside a container: one of which has overflow:
https://codepen.io/anon/pen/LKxdyV
(I've simplified the website a bit, in reality it contains more content and has a js plugin, so that explains the extra -now seemingly unnecessary- divs)
However, when the text exceeds the initial container, the parent (the div with class 'right') doesn't grow with it. Ideally both .left and .right will still have a background color in the overflow text (so both the green and red will extend to the bottom of the page).
<div class="container">
<div class="bb-custom-wrapper">
<div class="bb-item">
<div class="content">
<div class="scroller">
<div class="left">
<h2>LEFT</h2>
</div>
<div class="right">
<h2>RIGHT</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus hendrerit sodales. Nullam sed lobortis sem. Curabitur ac orci lorem. Suspendisse potenti. Aenean ac commodo mauris. Fusce odio arcu, vestibulum faucibus dapibus laoreet, sollicitudin et mauris. Pellentesque at tellus id ex dictum pretium. Nullam lorem metus, ullamcorper sed molestie sed, maximus feugiat massa. Ut eleifend, neque eu euismod pulvinar, lacus mauris facilisis felis, rhoncus mattis odio odio in velit.
</p>
</div>
</div>
</div>
</div>
</div>
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
min-height: 100% !important;
height: 100%;
width:100%;
}
body {
font-family: 'Roboto', sans-serif;
background: #fff;
font-size: 100%;
color: #000000;
}
.container {
position: relative;
left: 0px;
}
.container, .bb-custom-wrapper {
width: 100%;
height: 100%;
}
.content {
position: absolute;
left: 0;
width: 100%;
height:100%;
}
.content h2 {
font-family: 'Playfair Display', serif;
font-weight:normal;
font-size: 4em;
padding: 0 6% 10px;
color: #333;
margin: 60px 1% 40px;
text-align: left;
box-shadow: 0 10px 0 rgba(223,137,167,0.02);
}
.scroller {
padding: 10px 5% 10px 5%;
height:100vh;
width:100%;
position:relative;
overflow:scroll;
}
.scroller .left, .scroller .right{
width:50%;
height:100% !important;
position:absolute;
top:0;
}
.left{
left:0;
float:left;
background-color:red;
}
.right{
float:right;
right:0;
background-color:green;
}
I've found this question and its answer but the solution doesn't seem to help. Probably has to do with that I have the overflow in height and the question is about width?
Edit: updated code snipped with image on left side.
https://codepen.io/gibbok/pen/YoNaJZ

Answer 1

Use overflow: auto; so it will follow its parent's height.
Result here:
https://codepen.io/gibbok/pen/YoNaJZ
.right{
float:right;
right:0;
background-color:green;
overflow: auto;
}
#import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
#import url('https://fonts.googleapis.com/css?family=Playfair+Display:900&display=swap');
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
min-height: 100% !important;
height: 100%;
width:100%;
}
body {
font-family: 'Roboto', sans-serif;
background: #fff;
font-size: 100%;
color: #000000;
}
.container {
position: relative;
left: 0px;
}
.container, .bb-custom-wrapper {
width: 100%;
height: 100%;
}
.content {
position: absolute;
left: 0;
width: 100%;
height:100%;
}
.content h2 {
font-family: 'Playfair Display', serif;
font-weight:normal;
font-size: 4em;
padding: 0 6% 10px;
color: #333;
margin: 60px 1% 40px;
text-align: left;
box-shadow: 0 10px 0 rgba(223,137,167,0.02);
}
.scroller {
padding: 10px 5% 10px 5%;
height:100vh;
width:100%;
position:relative;
overflow:scroll;
}
.scroller .left, .scroller .right{
width:50%;
height:100% !important;
position:absolute;
top:0;
}
.left{
left:0;
float:left;
background-color:red;
}
.right{
float:right;
right:0;
background-color:green;
overflow: auto;
}
<div class="container">
<div class="bb-custom-wrapper">
<div class="bb-item">
<div class="content">
<div class="scroller">
<div class="left">
<h2>LEFT</h2>
</div>
<div class="right">
<h2>RIGHT</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus hendrerit sodales. Nullam sed lobortis sem. Curabitur ac orci lorem. Suspendisse potenti. Aenean ac commodo mauris. Fusce odio arcu, vestibulum faucibus dapibus laoreet, sollicitudin et mauris. Pellentesque at tellus id ex dictum pretium. Nullam lorem metus, ullamcorper sed molestie sed, maximus feugiat massa. Ut eleifend, neque eu euismod pulvinar, lacus mauris facilisis felis, rhoncus mattis odio odio in velit.
</p>
</div>
</div>
</div>
</div>
</div>