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

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


    

        

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.