div 자식을 100 % 높이 내에서 스크롤 가능하게 만듭니다.

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가 전체 높이가되고 flex 속성에 따라 내용 div가 확장되기를 바랍니다. 각도 재질의 지시문을 사용하여 지시문을 채우면 100 % 높이가 추가되므로 현재 작동 중입니다.

내용이 화면 높이와 함께 표시 될 수있는 것보다 길 경우, 하위 div를 스크롤 할 수있게하고 싶습니다.

내 생각은 높이가 400px 미만인 경우 미디어 쿼리를 사용하여 하위 속성에 클래스 속성을 추가하는 것이 었습니다.

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

불행히도 이것은 작동하지 않습니다. 아이의 높이는 부모와 동일합니다 (화면 높이). 요소 (Chrome)를 검사 할 때 CSS 높이가 400 픽셀이지만 계산 된 높이는 아니라고합니다.

나는 그것을 정말로 이해하지 못한다.

JSFiddle

어떤 아이디어가?

Answer 1

나는 몸에 스크롤되는,

그것의 내용만큼 높은 강제

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

적어도 400 픽셀로 미디어 쿼리의 설정을 변경합니다.

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