How can I scroll content inside div but not scroll parent container? - css

Question

I have grid based layout with two columns (aside and section) inside container (main). Every column should be scrollable separately but container should not be scrollable at all. The heights of both columns are dynamic but container has fixed height.
I've tried two approaches with overflow-y on parent container :
With overflow-y: scroll but .... When I finish scrolling inside one of child divs e.g (aside) the whole container(main) starting to scroll what is not I want.
With overflow-y: hidden but .... then content inside scrollable child divs is cut, like
here:
cut content inside child scrollable divs when parent has overflow-y to hidden
I've also tired with overscroll-behaviour property but it seems to be not working, I have no clue why.
main {
display: grid;
grid-template-columns: 336px 2fr;
overflow-y: scroll;
/*hidden cuts my content */
max-height: 400px;
}
section {
max-height: 100vh;
border: 1px solid black;
overflow-y: scroll;
--webkit-overscroll-behavior-y: none;
}
aside {
border: 1px solid blue;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow-y: scroll;
max-height: 100vh;
--webkit-overscroll-behavior-y: none;
}
div {
display: flex;
max-width: 304px;
border: 1px solid red;
background-color: lightgreen;
margin-bottom: 12px;
padding: 15px;
}
<main>
<aside>
<div>
Text 1
</div>
<div>
Text 2
</div>
<div>
Text 3
</div>
<div>
Text 4
</div>
<div>
Text 5
</div>
<div>
Text 6
</div>
<div>
Text 7
</div>
<div>
Text 8
</div>
<div>
Text 9
</div>
</aside>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at lacus nisl. Aliquam sed elit vel nisi egestas fringilla non eget metus. Nam tempus vehicula massa, et pharetra orci pulvinar eu. Etiam tincidunt arcu nisl, ac porttitor felis ornare eget.
Suspendisse feugiat posuere dui, id imperdiet nisl tincidunt vel. Duis ut tempus purus. Nulla facilisis lobortis sagittis. Fusce risus augue, hendrerit id nisi sed, luctus imperdiet sem. Phasellus vestibulum scelerisque massa, tincidunt porta lectus
gravida non. Integer egestas ipsum eros. Duis a ultrices odio. Curabitur justo lectus, ultricies quis urna eget, interdum scelerisque felis. Nullam eleifend est in efficitur vulputate. Praesent sit amet vulputate nibh, at vulputate dui. Nulla facilisi.
Praesent sollicitudin mi nec sem sollicitudin, et aliquam diam rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent finibus justo sem, vitae tincidunt mi consequat in. Aliquam ullamcorper ultrices
nulla, at dapibus nulla hendrerit eget. Nullam sit amet libero a magna dictum mattis. Suspendisse hendrerit suscipit augue, vel congue sapien tincidunt nec. Donec volutpat tempor felis ac sagittis. Donec in bibendum leo. Nunc cursus leo ex, in commodo
massa laoreet vitae. Phasellus eu lorem eu felis facilisis faucibus. Suspendisse pretium a ex id sodales. Proin eu enim id nisl aliquam luctus nec non tellus. Nullam fermentum dolor ac semper aliquet. Fusce accumsan vestibulum lorem eget malesuada.
In eget molestie urna, eget viverra sapien. Nullam malesuada sapien at orci hendrerit, vitae dapibus lorem pulvinar. Duis ornare odio lectus, id hendrerit magna mattis id. Duis in est non nisi placerat gravida sed ut enim. Proin pellentesque mollis
eros, sit amet mattis lectus fringilla quis. Donec eu ligula eu ex mollis suscipit. Vestibulum blandit imperdiet sodales. Maecenas malesuada magna id sem fermentum, nec pulvinar dolor mollis. Nam tempus, velit ac dignissim interdum, augue est pulvinar
urna, id molestie lectus tellus in mi. Curabitur cursus purus eget hendrerit auctor. Maecenas vel orci et urna hendrerit varius. Suspendisse potenti.
</section>
</main>
Here is snippet for this case:
https://jsfiddle.net/Lgeayx4u/3/
Is it possible do what I want with pure CSS? I would like to avoid JS.

Answer 1

If you don't want the outer container to scroll and also keep a fixed height to it, then definitely you will not be able to reach the complete content for the aside and section portions. The better option is to let them inherit the container's height and set overflow-y: hidden on the container:
main {
display: grid;
grid-template-columns: 336px 2fr;
overflow-y: hidden;
/*hidden cuts my content */
height: 300px;
}
section, aside{ height: 100%; }
section {
max-height: 100vh;
border: 1px solid black;
overflow-y: scroll;
--webkit-overscroll-behavior-y: none;
}
aside {
border: 1px solid blue;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow-y: scroll;
max-height: 100vh;
--webkit-overscroll-behavior-y: none;
}
div {
display: flex;
max-width: 304px;
border: 1px solid red;
background-color: lightgreen;
margin-bottom: 12px;
padding: 15px;
}
<main>
<aside>
<div>
Text 1
</div>
<div>
Text 2
</div>
<div>
Text 3
</div>
<div>
Text 4
</div>
<div>
Text 5
</div>
<div>
Text 6
</div>
<div>
Text 7
</div>
<div>
Text 8
</div>
<div>
Text 9
</div>
</aside>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at lacus nisl. Aliquam sed elit vel nisi egestas fringilla non eget metus. Nam tempus vehicula massa, et pharetra orci pulvinar eu. Etiam tincidunt arcu nisl, ac porttitor felis ornare eget.
Suspendisse feugiat posuere dui, id imperdiet nisl tincidunt vel. Duis ut tempus purus. Nulla facilisis lobortis sagittis. Fusce risus augue, hendrerit id nisi sed, luctus imperdiet sem. Phasellus vestibulum scelerisque massa, tincidunt porta lectus
gravida non. Integer egestas ipsum eros. Duis a ultrices odio. Curabitur justo lectus, ultricies quis urna eget, interdum scelerisque felis. Nullam eleifend est in efficitur vulputate. Praesent sit amet vulputate nibh, at vulputate dui. Nulla facilisi.
Praesent sollicitudin mi nec sem sollicitudin, et aliquam diam rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent finibus justo sem, vitae tincidunt mi consequat in. Aliquam ullamcorper ultrices
nulla, at dapibus nulla hendrerit eget. Nullam sit amet libero a magna dictum mattis. Suspendisse hendrerit suscipit augue, vel congue sapien tincidunt nec. Donec volutpat tempor felis ac sagittis. Donec in bibendum leo. Nunc cursus leo ex, in commodo
massa laoreet vitae. Phasellus eu lorem eu felis facilisis faucibus. Suspendisse pretium a ex id sodales. Proin eu enim id nisl aliquam luctus nec non tellus. Nullam fermentum dolor ac semper aliquet. Fusce accumsan vestibulum lorem eget malesuada.
In eget molestie urna, eget viverra sapien. Nullam malesuada sapien at orci hendrerit, vitae dapibus lorem pulvinar. Duis ornare odio lectus, id hendrerit magna mattis id. Duis in est non nisi placerat gravida sed ut enim. Proin pellentesque mollis
eros, sit amet mattis lectus fringilla quis. Donec eu ligula eu ex mollis suscipit. Vestibulum blandit imperdiet sodales. Maecenas malesuada magna id sem fermentum, nec pulvinar dolor mollis. Nam tempus, velit ac dignissim interdum, augue est pulvinar
urna, id molestie lectus tellus in mi. Curabitur cursus purus eget hendrerit auctor. Maecenas vel orci et urna hendrerit varius. Suspendisse potenti.
</section>
</main>