how to lock scrolling on a <div> behind a <div>

Question

I have a page that appends a div to the body of a html. However the issue now is that I have two scrolls going on (one on the new overlaying div and the other one behind it), here's the structure of the page approximately, how do I make it such that only this new appended div is the one that can be scrolled, not behind it.

Here's the structure approxiamtely:

<div class="right col clearfix>
<div class="modal container in">
</div>
</div>

basically I only wanted the modal container in to be the one that scrolls and nothing else.

Answer 1

HTML

<div class="right col clearfix>
    <div class="modal container in"></div>
</div>

CSS

.right col clearfix {
    overflow: hidden;
}
.modal container in {
    width: //your width;
    height: //yourheight;
    overflow: scroll;
}