Wesbite scrolls despite overflow-y - css

Question

Please see the Fiddle example.
The website scrolls entirely despite overflow-y configured onto the DIV of the orange area.
If the list within the orange area is shorter, it works perfectly: The website doesn't scroll, only a scrollbar appears on the right side of the area.
But if the inner content grows, there's a point that website begins to scroll.
How can I avoid that behavior? Doesn't matter how long the orange content is, only that area should scroll.
I'm using Bootstrap 4.
... links to fiddle must be accompanied by code...

Answer 1

Hoping i understood you well.Try this using bootstrap:
<div class="row">
<div class="col ">
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 flex-even bd-highlight bg-primary" >Heading</div>
<div class="p-2 flex-even bd-highlight bg-warning yellow">
</div>
<div class="p-2 flex-even bd-highlight bg-secondary">Flex item 3</div>
</div>
</div>
<div class="col bg-success Context">Context</div>
</div>
Styling:
.row{
height: 100vh;
padding: 0;
margin: 0;
}
.row >div{
padding: 0;
margin: 0;
}
.Context{
height: 100%;
overflow-y: scroll;
}
.flex-even {
height: 32.5vh;
}
.yellow{
overflow-y: scroll;
}