Polymer 1.1 Bruch der Papierkopfplatte in der Schablone

Mit Polymer 1.1 habe ich zwei Probleme mit paper-header-panel

1. Ich kann den Inhalt unter dem Panel nicht anzeigen
2. Ich kann das height: 2000px; nicht auf das div anwenden, also ich kann eine Bildlaufleiste haben, um den Wasserfalleffekt zu erzielen.

Ich habe https://github.com/PolymerElements/ verwendet. paper-header-panel / blob / master / demo / index.html als Beispiel.

Nach einigen Fehlerbehebungen hat div id="mainContainer" die Höhe 0. Wenn Sie den Flex aus der Klasse entfernen, wird die Höhe angewendet. Aber dann bricht dies den scrollenden Wasserfall-Effekt.

<dom-module id="custom-paper-header-panel">

  <template>
  <style>
    #foobar {
      height: 2000px;
    }
  </style>

    <paper-header-panel mode="waterfall-tall">
      <paper-toolbar>
        <div class='title'></div>
        <paper-tabs>
          <paper-tab>
            <div>contact</div>
          </paper-tab>
        </paper-tabs>
        <div class='title bottom'>
          <h1 id="name-title">foo</h1>
        </div>
      </paper-toolbar>
      <div id="foobar">
          <h2>This isn't being shown</h2>
      </div>
    </paper-header-panel>
  </template>

  <script>
    Polymer({
      is: "custom-paper-header-panel"
    });
  </script>
</dom-module>