具有Angular Material动态高度选项卡的可滚动内容元素

Question

在severa的演变过程中出现了imes l t Angular Material这个问题，但我无法让任何建议适用于v1.0.5。整个页面（或弹性容器）滚动，将标签移出视图。

如何实现可滚动的全高内容元素？

jsonb

Demo fiddle

Bonus Karma合并custom scrollbars。

Answer 1

我已经解决了。通过删除dynamic-height指令，然后使用绝对定位，它正在工作：

.tabs-wrapper {
    position: relative;
}
.full-size {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<div ng-app="sandbox">
    <div flex class="tabs-wrapper">
        <md-tabs class="full-size" md-border-bottom>

Fiddle demo

get the child of a flex element to expand需要绝对定位。

注意：小提琴演示中的高度不正确。这个问题在我的项目中没有发生。

Answer 2

将标签内容包裹在div中并为其指定最大高度。

<md-tab label="two">
        <md-content class="md-padding">
            <div class="tab-content">
                <h1 class="md-display-2">Tab Two</h1>
            <div>
        <md-content>
<md-tab>

和css part

div.tab-content{
  max-height:350px;
}

Js-fiddle link

Answer 3

试试这个：

md-tabs-wrapper {
    position : fixed;
    width: 100%;
    z-index: 1;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}

md-tabs-content-wrapper {
    margin-top: 48px;
}