Angular md-tabs，不滚动到网页的末尾

Question

第1张图片 - 普通视图
第二张图片 - 如果我调整大小并向下滚动，仍然看起来正常 第3张图片 - 当我点击其中一个li时，会有一个模板用于附加在列表中的数据

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

我还注意到滚动条在末端被切断，它没有弯曲/圆形。

顺便说一句，标签的内容是iframe。 external-app-template.pug附加在div

内的md-tab-body

使用的主要技术：

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（Less） - 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） - external-app.pug

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

CSS（Less） - external-app.less

#main-container {
  padding: 20px;
}

JS（Babel） - external-app.js

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