[css] flex 내 가변 요소 (가변 자식 요소가 부모 요소를 넘을 때)

부모 div(초록색 보더) 안에 2개의 div 요소가 있고,

div 1은 상단에 위치하며, height값이 고정이며,

div 2는 하단에 위차하고 나머니 공간을 채워주길 원합니다.

 

.flex {
    display:flex;
    flex-direction:column;
    height:100%;
}
.flex .div1{height:100px;}
.flex .div2{flex-grow:1;}

<div class="flex">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

flex를 이용하여 손쉽게 해결한 듯 했습니다.

그. 러. 나 문제는 div2의 컨텐츠 양이 많아지면 부모 div를 넘어가네요... 

 

이럴 경우 해결방법!!!

 

min-height:0;

가변 자식 요소에 min-height:0;을 줍니다.

flex 아이템의 min-height, min-width 초기값은 auto이며, 초기값인 flex-basis:auto 보다 우선적으로 적용되어 flex 아이템의 비대화에 의해 flex 컨테이너 영역을 버어나게 되는 것 입니다.

그.래.서! min-height, min-width: 0; 으로 지정하게 되면, flex-basis:auto 가 우선 적용되어 아이템이 비대화되지 않아

영역을 벗어나지 않게 됩니다. 

그 후 넘치는 콘텐츠는 scroll로 보여주면 됩니다~ 

깔끔 :)

.flex {
    display:flex;
    flex-direction:column;
    height:100%;
}
.flex .div1{height:100px;}
.flex .div2{flex-grow:1;min-height:0;}

이 방법을 찾기 전에 시도 했던 여러 방법입니다.

 

 

overflow:hidden 

부모의 크기에 맞게 가릴 수는 있으나, 넘친 div2의 컨텐츠를 모두 볼 수 없습니다.

 

max-height:calc(100vh - px )

가변 자식 요소에 해당 속성을 줍니다. 그러나 결국엔 정확한 수치를 기입해야 하므로, 반응형을 생각했을 때 좋은 방법은 아닌거 같습니다.

 

글 읽어주셔서 감사합니다:)