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