paper-drawer-panel causes Y scrollbar not to scroll to the bottom of viewport

[Darin Hensley]

Stackoverflow cross post question

When I use paper-drawer-panel, the viewport is not correct. As shown in the first screen shot, the Y scroll bar is there as it should be....but the bottom of the viewport does not equal the end/bottom of the y scrollbar. In otherwards, there is still a portion of the content not showing that is hidden.

If I remove paper-drawer-panel, then everything is good and the Y scroll bar scrolls to the bottom of the viewport.

This is in index.html.

Anyway to fix this? I tried removing <div drawer><drawer-custom></drawer-custom></div> but it had no influence. 

Bad - with paper-drawer-panel:

  <template is="dom-bind" id="app">

    <paper-drawer-panel force-narrow="true">

      <div drawer>

        <drawer-custom></drawer-custom>

      </div>

      <div main>

        <div id="header-v-center">

          <paper-icon-button id="paper-toggle" icon="menu" paper-drawer-toggle>

          </paper-icon-button>

          <div id="header-text-middle">SPICES OF THE WORLD</div>

          <div id="header-text-right">A SPECIAL EDITION! </div>

        </div>

        <div id="video-player-header" onclick="page('/home')" style="display: none">

          <div>

            <iron-icon icon="icons:arrow-back"></iron-icon>

          </div>

        </div>

        <video-selection></video-selection>

        <video-player></video-player>

      </div>

    </paper-drawer-panel>

  </template>

GOOD - without paper-drawer-panel:

  <template is="dom-bind" id="app">
      <div main>
        <div id="header-v-center">
          <paper-icon-button id="paper-toggle" icon="menu" paper-drawer-toggle>
          </paper-icon-button>
          <div id="header-text-middle">SPICES OF THE WORLD</div>
          <div id="header-text-right">A SPECIAL EDITION! </div>
        </div>
        <div id="video-player-header" onclick="page('/home')" style="display: none">
          <div>
            <iron-icon icon="icons:arrow-back"></iron-icon>
          </div>
        </div>
        <video-selection></video-selection>
        <video-player></video-player>
      </div>
  </template>