I've scoured the vast expanse of the internet, but my search has been fruitless.
Here lies my dilemma.
I want my <main> element to have a scrollbar with overflow-y:scroll.
No scrollbar on the body, just on the main element.
For a visual representation, I've created a pen: http://codepen.io/magalielinda/pen/rymzBG/
You'll notice that the scrollbar appears, but it's not functional. Why is this happening? And how can I make it scroll?
Below is a snippet of my demo html for those who may find it easier to provide a solution this way:
<main>
<div class="content__container">
</div>
</main>
and demo css:
body {
overflow: hidden;
height: 100%;
}
main,
.content__container {
height: 100%;
}
main {
overflow-y: scroll;
background-color: red;
border: 1px solid blue;
}
.content__container {
max-width: 200px;
margin: 0 auto;
background-color: aqua;
height: 1000px;
}
Thank you for your assistance!
UPDATE
I've made adjustments based on this solution. Here is the updated result. http://codepen.io/magalielinda/pen/JWyVOM