Scrollable Content Elements with Angular Material Height Dynamic Tabs

Question

This question appeared severa lt imes during the evolution of Angular Material , but I can not make any suggestions for v1.0.5. The entire page (or flexible container) scrolls, moving tabs out of sight.

How can I get scrollable, full-sized content elements?

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

Demo script

Bonus karma to enable custom scrollbars .

Answer 1

I have worked. By removing the dynamic-height directive using absolute positioning, it works:

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

Screenshot

Absolute positioning is required to expand the flex child. .

Note. The height in the script demonstration is incorrect. This problem does not occur in my project.

Answer 2

Wrap the contents of the tab inside the div and assign it the maximum 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 the following:

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