Przewijane elementy treści z zakładkami dynamicznej wysokości z kątem kątowym

Question

To pytanie pojawiło się severa l t imes podczas ewolucji Angular Material, ale nie mogę wykonać żadnej z sugestii dla wersji 1.0.5. Cała strona (lub pojemnik elastyczny) przewija się, przesuwając karty poza obszar widoku.

Jak mogę uzyskać elementy przewijalnej zawartości o pełnej wysokości?

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

Demo fiddle

Bonus Karma dla włączenia custom scrollbars.

Answer 1

Opracowałem to. Usuwając dyrektywę dynamic-height, a następnie przy użyciu pozycjonowania bezwzględnego, że to działa:

.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 pozycjonowania jest wymagane do get the child of a flex element to expand.

Uwaga: Wysokość jest nieprawidłowa w wersji demonstracyjnej gry fiddle. Ten problem nie występuje w moim projekcie.

Answer 2

Zawiń zawartość zakładki wewnątrz elementu div i przypisz jej maksymalną wysokość.

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

i część css

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

Js-fiddle link

Answer 3

Spróbuj tego:

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