Sticky overlay at bottom of scrolling div - css

Question

I've got a scrollable container. I want an overlay to stick to the bottom of this container, but it should only cover the contents of the scrollable area, it should not cover the scrollbar.
Desired result:
With my current solution the problem is that the overlay also covers the scrollbar.
I COULD solve the issue by setting pixel values for 'width' and 'right' of the overlay. But I don't want to have to do that.
.container {
position: relative;
border: solid 1px red;
height: 100px;
width: 200px;
float: left;
margin-right: 16px;
}
.scrollable {
height: 100%;
overflow-y: scroll;
}
.overlay {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 30px;
background: rgba(100, 200, 10, 0.5);
}
<section class="container">
<div class="scrollable">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
quidem.
</div>
<div class="overlay"></div>
</section>

Answer 1

.container {
position: relative;
border: solid 1px red;
height: 100px;
width: 200px;
float: left;
margin-right: 16px;
}
.scrollable {
height: 100%;
overflow-y: scroll;
}
.scrollable p {
z-index:-2;
position:relative;
}
.overlay {
position: absolute;
bottom: 0;
right: 0;
left: 0;
width:100%;
height: 30px;
background: rgba(100, 200, 10, 0.5);
z-index:-1;
}
<section class="container">
<div class="scrollable">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
quidem.</p>
</div>
<div class="overlay"></div>
</section>

Answer 2

I checked your codes.
Please try it.
.overlay {z-index: -1;}

Answer 3

position:sticky; could be used :
(quotes from sitepoint introduction to sticky)
See position: sticky on Can I Use… for all the details.
Fortunately there a number of polyfills to choose from:
fixed-sticky by the Filament Group (requires jQuery)
position–sticky- by Matthew Phillips (Uses Modernizr for detection)
position: sticky, part of Philip Walton’s Polyfill.js library
position: sticky CodePen demo by Fabrice Weinberg (requires jQuery)
Stickyfill by Oleg Korsunsky (IE9+)
.container {
position: relative;
border: solid 1px red;
height: 100px;
width: 200px;
float: left;
margin-right: 16px;
}
.scrollable {
height: 100%;
overflow-y: scroll;
position: relative;
}
.overlay {
position: sticky;
bottom: 0;
right: 0;
width: 100%;
height: 30px;
background: rgba(100, 200, 10, 0.5);
}
<section class="container">
<div class="scrollable">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
quidem.
<div class="overlay"></div>
</div>
</section>
Scrollbar is average 1em wide, you can give a try using only coordonates to size the width of this overlay.
.container {
position: relative;
border: solid 1px red;
height: 100px;
width: 200px;
float: left;
margin-right: 16px;
}
.scrollable {
height: 100%;
overflow-y: scroll;
}
.overlay {
position: absolute;
bottom: 0;
right: 1em;
left:0;
height: 30px;
background: rgba(100, 200, 10, 0.5);
}
<section class="container">
<div class="scrollable">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
quidem.
</div>
<div class="overlay"></div>
</section>
screenshot in Chrome: