javascript - Enable Scrolling on my sidenav -

i trying enable scrolling on sidenav in same way when overflow in normal divs, there nav preventing me being able this, such items on sidenav-list overflow screen cannot accessed.

here sidenav code in html:

<div pageslide ps-open="ctrl.checked" class="blue-grey darken-1 white-text">                 <a ng-click="ctrl.toggle()" class="button">&#x2716;</a>                 <div style="padding:20px" id="demo-right">                     <table class="bordered responsive-table">                       <thead>                         <tr>                             <th data-field="id">company</th>                             <th data-field="name">shares owned</th>                         </tr>                       </thead>                        <tbody>                            <tr ng-repeat="stock in ctrl.myportfolio.stocksinportfolio">                                   <td>{{stock.stock.name}}</td>                                   <td>{{stock.qty}}</td>                           </tr>                       </tbody>                   </table>                   portfolio: {{ctrl.total | currency}}                 </div>             </div> 

and here trying in css:

#sentimentdatatwo {    overflow: hidden;    overflow-y: scroll; } #demo-right {    overflow: hidden;    overflow-y: scroll; } 

i included #sentimentdata working css mod creating scrollable div, #demo-right try apply sidenav. sidenav pop-out. thoughts?

maybe it's because div doesn't have height, means height adjusted content. let me know if helps. if not, provide jsfiddle? though have dynamic data, lot if prepare similiar situation.

#demo-right {    overflow: hidden;    overflow-y: scroll;    height: 300px; }