CSS - Scroll is consumed by the div behind when scroll reachs bottom

Question

I have two divs, one of then (green) planned to be a right drawer, when the drawer is opened I scroll down and I am at the bottom, scroll event is consumed by the div behind (yellow). I need yellow div to be scrollable when my mouse is over the yellow area, I need the green div to be scrollable when my mouse is over the green area, but I DONT want yellow area to catch the scroll event when my mouse is over the green area and reach the end. What can I do?

Here is my fiddle: http://jsfiddle.net/jmhostalet/Nr7hq/

<div ng-app>
<div ng-controller="MyCtrl">
<div ng-repeat="value in values" class="main">
    M{{value}}<br/>
</div>
<div class="rightDrawer">
    <div class="scrollableArea">
        <div ng-repeat="value in values2">
            D{{value}}<br/>
        </div>
    </div>
</div>
</div>

My CSS

 .main{
     background-color:yellow;
 }
 .rightDrawer{
     background-color:lightgreen;
     position: fixed;
     width: 400px;
     top:0;
     right:0;
     z-index:5;
     height: 100%;
     overflow: auto;
 }
 .scrollableArea{
     overflow:scroll;
 }

Thank you !!

Answer 1

May be like this

    .main{
     background-color:yellow;
     overfiow:hidden
 }
    .main:hover {
     background-color:yellow;
     overfiow:auto
 }
     .scrollableArea{
     overflow:hidden
 }
     .scrollableArea:hover{
     overflow:scroll;
 }