处理 内不同高度的聚合物元素

我有一个<core-drawer-panel>里面是一个<core-pages>里面的元素<core-header-panel main>.

<core-pages>包含一组我定义的自定义元素，并且在任何时间点仅显示其中一个元素。但问题是，有些元素只占据屏幕的一部分，但仍然垂直滚动。滚动量等于其中最高的元素<core-pages>.

预期的行为是元素仅在超出其视口时才滚动。我怎样才能实现这种行为？

演示-students.html（精简版本，使其更具可读性）

<polymer-element name="students-dashboard">
  <template>
    <style>
      …
    </style>

    <core-drawer-panel…>
      <core-header-panel drawer mode="seamed">
          …
      </core-header-panel>

      <core-header-panel main mode="seamed">
        <core-toolbar …>
          <span flex>Students</span>
        </core-toolbar>

        <div class="content">
          <core-pages selected={{getModule(route)}} valueattr="name">
            <!--
              This needs to scroll and it does
            -->
            <students-grid name="students"></students-grid>

            <!--
              The content of this element is short,
              but still scrolls to the same extent as the
              <students-grid> element
            -->
            <student-editor name="student_editor"></students-editor>
          </core-pages>
        </div>
      <core-header-panel>
    </core-drawer-panel>
  </template>

  <script>
    …
  </script>
</polymer-element>

我不知道这是否与我遇到的问题相同：使用时<core-pages>它正在滚动beyond较小选项卡的内容。每个页面的大小与最大页面的大小相同。

除了更换之外没有任何效果<core-pages> with <animated-core-pages>这使得问题神奇地消失了。

我也有类似的问题<core-scaffold>来自起始项目，该项目与 Bowser 下载的版本（同一天）不同。使用后者时，一个错误消失了。

Tldr：也许起始项目不是最新的。

PS：这解决了页面大小问题，而不是跨页面保持滚动位置的问题。