scrollbar - Polymer core-scaffold nav core-menu does not scroll -

i have polymer core-scaffold looks this:

<core-scaffold id="scaffold">   <nav>     <core-toolbar>       <div>menu</div>     </core-toolbar>     <core-menu valueattr="hash" selected="{{route}}" selectedmodel="{{selectedpage}}"                on-core-select="{{menuitemselected}}">         <template repeat="{{page, in pages}}">           <paper-item hash="{{page.hash}}" noink style="color: #{{page.hash}}">             <core-icon icon="label{{route != page.hash ? '-outline' : ''}}"></core-icon>             <a href="#{{page.hash}}">{{page.label}}</a>           </paper-item>         </template>     </core-menu>   </nav>   ... </core-scaffold> 

everything works beautifully. drawer pops out, etc. have dozen items in menu, , if screen height insufficient, bottom ones cut off. have spent hours trying figure out how core-menu scroll no avail.

what's trick? missing?

you might use core-header-panel element in order wrap menu. core-header-panel manage scrolling you. put example on jsfiddle , code snipped here in order elaborate usage:

http://jsfiddle.net/kreide/wh92b8bo/

<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">  <link rel="import" href="http://www.polymer-project.org/components/paper-elements/paper-elements.html">  <link rel="import" href="http://www.polymer-project.org/components/core-elements/core-elements.html">    <polymer-element name="my-element" constructor="" attributes="">      <template>          <core-scaffold id="scaffold">              <core-header-panel navigation flex mode="seamed">                      <core-toolbar>                          <div>menu</div>                      </core-toolbar>                      <div class="content">                          <core-menu valueattr="hash" selected="{{route}}" selectedmodel="{{selectedpage}}"                                 on-core-select="{{menuitemselected}}">                              <template repeat="{{page, in pages}}">                                  <paper-item hash="{{page.hash}}" noink style="color: #{{page.hash}}">                                      <core-icon icon="label{{route != page.hash ? '-outline' : ''}}"></core-icon>                                      <a href="#{{page.hash}}">{{page.label}}</a>                                  </paper-item>                              </template>                          </core-menu>                                              </div>              </core-header-panel>              <div tool>title</div>              <div>main content goes here...</div>          </core-scaffold>      </template>      <script>          polymer('my-element', {              pages: [{label: '1', hash: "d6e3f2"},                  {label: '2', hash: "d6e3f2"},                  {label: '3', hash: "d6e3f2"},                  {label: '4', hash: "d6e3f2"},                  {label: '5', hash: "d6e3f2"},                  {label: '6', hash: "d6e3f2"},                  {label: '7', hash: "d6e3f2"},                  {label: '8', hash: "d6e3f2"},                  {label: '9', hash: "d6e3f2"},                  {label: '10', hash: "d6e3f2"},                  {label: '11', hash: "d6e3f2"}]          });      </script>  </polymer-element>    <my-element></my-element>