Scrollable content elements with Angular Material

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 container) scrolls, moving the tabs out of view.

How can I achieve scrollable, full-height content elements?

<div flex>
    <md-tabs md-dynamic-height md-border-bottom>
        <md-tab label="one">
            <md-content class="md-padding">

Demo fiddle

Bonus Karma for incorporating custom scrollbars.

Answer 1

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.

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

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