CSS - Scroll is consumed by the div behind

Question

I have two divs, one of then planned to be a right drawer, when the drawer is opened and I try to scroll, scroll event is consumed by the div behind. What do I need to do in order the drawer to consume the scroll event. I mean, I need to scroll over the drawer not over the main area.

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

<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;
 }
 .scrollableArea{
     overflow:scroll;
 }

Thank you !!

Answer 1

You could do this:

.rightDrawer {
background-color: lightgreen;
position: fixed;
width: 400px;
height: 100%;
overflow-y: overlay;
top: 0;
right: 0;
z-index: 5;
}

Heres the FIDDLE