div子を100％の高さの中でスクロール可能にする親div

Question

私はこの一見単純な問題の解決策を見つけようとしましたが、運がありません。私はAngularJSとAngular Materialを使用しています。

index.htmlを

<div class="parent" layout="column" layout-fill ng-view> 
</div> 

例HTMLテンプレート：

<div class="child" layout="column" layout-fill> 
    <div flex="20"> 
     Some content 
    </div> 
    <div flex> 
     Some more content 
    </div> 
</div> 

（親と子 CSSクラスでは何もここだけの名前の参照に使用する、ありません）

コンテンツが画面の高さよりも短い場合、親divと子divの両方をフルハイトにし、コンテンツdivをflexプロパティに応じて展開します。角度材料からレイアウトフィルディレクティブが100％の高さを追加するので、現在これは動作しています。

コンテンツが画面の高さで表示できるものよりも長い場合は、子divをスクロール可能にしたいと思います。

私の考えは、高さが400px以下の場合、メディアクエリを使用して子のdivにクラスプロパティを追加することでした。

@media screen and (max-height: 400px){ 
.child{ 
     height: 400px; 
     overflow-y: scroll; 
    } 
} 

残念ながら、これは機能しません。子の高さは親と同じです（画面の高さ）。要素（Chrome）を調べると、CSSの高さは400ピクセルですが、計算された高さは表示されません。

私は本当にそれを理解していません。

JSFiddle

任意のアイデア？

Answer 1

私は、その内容やボディにスクロールします少なくとも400ピクセル、同じくらい高いことが強制的にそれ

child { 
    min-height: 400px; 
    overflow-y: visible; 
    } 

にメディアクエリの設定を変更します。

https://jsfiddle.net/zy0o7jn6/1/