플렉스 박스 : 다른 두 플렉스 사이의 플랙시드 스크롤 오버 플로우

Question

나는 오버레이를 중심으로하는 모달 대화 상자를 가지고있다.

대화 상자는 3 개의 플렉스 자식이있는 플렉스 컨테이너이며 최대 높이가 90 %입니다.

문서 높이가 필요한 모달 높이보다 작 으면 두 번째 자식 (모달 - 본문)을 사용하여 스크롤 할 수있게하십시오.

<div class="modal"> 
    <div class="modal-header"><h2>Modal Header</h2></div> 
    <div class="modal-body"> <!--this should scroll if modal-height > 90% --> 
     <!-- content --> 
    </div> 
    <div class="modal-controls"><!-- controls --></div> 
</div> 

순수 CSS에서는 가능하지 않다는 단서가 없습니다.

.modal { 
    position: relative; 
    width: 10em; 
    max-width: 90%; 
    max-height: 90%; 
    background-color: green; 
    display: flex; 
    flex-flow: row wrap; 
} 
.modal-header { flex: 1 auto; } 
.modal-body { 
    flex: 1 auto; 
    overflow-y: scroll; 
} 
.modal-controls { flex: 1 auto; } 

여기 내 접근 방법은 Fiddle입니다.

출력 창의 크기를 조정하면 오버플로를 스크롤하는 대신 하단에서 모달 대화 상자가 잘리는 것을 볼 수 있습니다.

미리 감사드립니다.

Answer 1

이것은 매우 간단합니다. 당신이 필요로

.modal { 
    ... 
    flex-direction: column; 
} 

와

.modal { 
    ... 
    flex-flow: row wrap; 
} 

를 대체하는 것입니다 그리고 그것은 작동합니다. 필요 없음,하지만 당신은 또한 확장 모달 헤더 및 모달-컨트롤을 방지해야합니다

여기

.modal-header, .modal-controls { 
    flex: 0 0 auto; 
} 
.modal { 
    ... 
    flex: 1 1 auto; 
} 

가 working example

입니다