Scrollable content elements with Angular Material dynamic-height tabs

Question

This question has come up several times during the evolution of Angular Material, but I\'m not able to make any of the suggestions work for v1.0.5. The entire page (or flex

Answer 1

Try this:

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;
}

Answer 2

Wrap the tab content inside a div and assign it a max height.

<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>

and css part

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

Js-fiddle link

Answer 3

I've worked it out. By removing the dynamic-height directive, then using absolute positioning, it's working:

.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

Absolute positioning is required to get the child of a flex element to expand.

Note: The height is incorrect in the fiddle demo. This problem doesn't occur in my project.