Overflow:scroll property not including background in overflow

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

GibboK · Accepted Answer · 2019-06-20 19:02:06Z

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>

answered Jun 20, 2019 at 19:02

GibboK

74.3k149 gold badges453 silver badges676 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lisa Over a year ago

basically the parent should stretch/overflow to contain the overflowing child, so that the scrollbar will work even if you are scrolling with the mouse pointer on the left image.

GibboK Over a year ago

I see only one scroll bar? Could you make a screen shot? Which browser/version are you using?

Lisa Over a year ago

Sorry I think I've been trying too many things (the double scrollbar was in an older version). In the latest codepen, codepen.io/gibbok/pen/YoNaJZ, you can see there's only a scrollbar at the green side, which only works if you over with the mouse pointer on the green side and scroll. I'd like to have the scrollbar working even if you are with the pointer hovering on the image. I'll delete the first comment.

Collectives™ on Stack Overflow

Overflow:scroll property not including background in overflow

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related