Html 有角度的md选项卡，不向上滚动到网页末尾

第一张图像-正常视图
第二张图片-如果我调整大小并向下滚动，看起来仍然正常
第三幅图像-当我单击其中一个

li

时，列表中将附加一个数据模板

问题是，在第三张图像上，还有其他数据要显示，但这些数据没有显示。我无法进一步向下滚动以显示剩余的数据

我还注意到滚动条在末端被切断，它不是弯曲/圆形的

顺便说一句，选项卡的内容是一个iframe

external app template.pug

附加到

md选项卡主体内的
div

使用的主要技术：

angular - 1.5.7
pug - 2.0.0-alpha6
gulp - 3.9.1
gulp-pug - 3.0.3
gulp-less - 3.1.0
babel-core - 6.10.4

HTML（Pug）-index.Pug：

body
  div(layout="column" layout-fill ng-include="'layout/layout.template.html'" ng-controller="LayoutController as vm")
    div.scrollable(ng-if="vm.user" layout="column" flex)
      md-tabs(md-dynamic-height md-border-bottom md-selected="vm.selectedTab")
        md-tab(ng-repeat="tab in vm.tabs" ng-disabled="tab.disabled")
          md-tab-label {{tab.label}} {{tab.extraLabel}}
          md-tab-body
            div(ng-include="tab.template" dynamic-controller="tab.controller" prospect="vm.prospect")

HTML（Pug）-external-app-template.Pug：

div(layout="column" flex)
  iframe(ng-show="is_ready" src="{{iframe_url}}" flex)

CSS（更少）-main.Less：

html {
  overflow: hidden;
}
iframe {
  border: none;
  height: 100%;
}
.scrollable {
  height: 100%;
  overflow-y: auto;
}
md-tabs,
md-tabs-content-wrapper,
md-tab-content,
md-tab-content div {
  height: 100%;
}

HTML（Pug）-外部-app.Pug

body(ng-controller="ctrl" style="height: {{frame_height}}px;")
  md-content#main-container

CSS（更少）-外部应用程序更少

#main-container {
  padding: 20px;
}

JS（巴别塔）-外部-app.JS

window.addEventListener("resize", (ev) => {
  $scope.frame_height = document.body.clientHeight - 20;
});