角度材料虚拟重复奇怪滚动行为

Question

我有嵌套的虚拟重复，它渲染没有问题，但我有奇怪的滚动问题。如果我向下滚动，我无法查看所有项目，它会跳转到另一个父项目。好吧，很难解释。

我认为问题是父项的预定义高度。虚拟重复为每个项目设置相同的高度，但我的高度不同。这就是为什么我有滚动问题，但我找不到任何解决方案，使每个项目的动态高度（不渲染滚动）。

我已经创建了一支笔，请尝试慢慢向下滚动，你会明白我的意思。

以下是链接：https://codepen.io/semihgk/pen/Pzrwkj

        <div ng-controller="AppCtrl as ctrl"  class="content virtualRepeatStoreList" ng-app="MyApp">
          <md-virtual-repeat-container class="vertical-container" style="height:550px">
            <div md-virtual-repeat="item in ctrl.items">
            <md-card flex="">
              <md-card-title>
                <md-card-title-text>
                  <span class="md-display-2">{{ item.nbr }}</span>
                </md-card-title-text>
              </md-card-title>
              <md-list style="overflow:auto;height:auto;" flex ng-cloak layout="column">
                <md-divider></md-divider>
                <md-list-item layout="row" class="noright">
                  <md-subheader flex>Item</md-subheader>
                </md-list-item>
                <md-list-item ng-repeat="it in item.items" style="max-height:40px;overflow:hidden;" class="noright">
                  <p>{{ it.nbr }}</p>
                  <md-checkbox class="md-secondary" ng-model="it.checked"></md-checkbox>
                </md-list-item>
              </md-list>
            </md-card>
          </div>
          </md-virtual-repeat-container>
        </div>

如果有人有任何想法，我会非常感激。非常感谢你的任何建议！