flexbox의 성장을 제한하는 방법은 무엇입니까?

Question

나는 앞으로의 d3 대시 보드에 대해 이 아닌 뜻밖의 표현으로 프레임을 만들려고 노력하고 있습니다.은 페이지의 측면을 따라 스크롤 할 수 있기를 원하며, 지금까지 제대로 작동했습니다(). 또한 빨간 막대가 일정한 높이를 유지하고 녹색 열이 뷰포트의 크기가 조절 될 때 일정한 너비를 유지하기를 원합니다 (현재 수행).

또한 각 컬러 상자는 내용 (텍스트의 테이블 행)으로 채워져 전체적으로 인터페이스의 크기에 영향을 미치지 않도록 내부적으로 스크롤되기를 원합니다. 그러나 뉴스 피드 div에 요소를 추가하면 (예 : 오른쪽), 요소를 수용하기 위해 커집니다 (원하는 부분이 아닌). 문제를 보여주는 runnable gist입니다.

보다는 전체 부모 DIV <div id="under-splash-banner">의 높이 수정 <p> 태그의 예 스택

(알 어떻게 다른 파란색 상자 결과로 모든 스트레치)과의 전체 높이를 따라 세로 스크롤 막대를 생성 오른쪽에서 녹색 뉴스 피드 div가 기본 빈 크기를 넘기보다는 모든 내용을 표시하도록 내부적으로 스크롤하기를 원합니다 (따라서 전체 창을 스크롤해야합니다).

이 항목이나 상위 항목에 최대 높이가 지정되어 있지 않은 것과 관련이 있습니까? 그렇다면 어떻게해야 레이아웃의 응답 성을 유지할 수 있습니까?

@import 'https://fonts.googleapis.com/css?family=Roboto'; 
 
@import 'https://fonts.googleapis.com/css?family=Open+Sans'; 
 

 
/* line 4, D:/Webstorm Projects/EDIS/css/style.sass */ 
 

 
html { 
 
    box-sizing: border-box; 
 
} 
 
/* line 7, D:/Webstorm Projects/EDIS/css/style.sass */ 
 

 
*, 
 
*::before, 
 
*::after { 
 
    box-sizing: inherit; 
 
} 
 
/* line 10, D:/Webstorm Projects/EDIS/css/style.sass */ 
 

 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin: 0; 
 
    height: 100vh; 
 
    font-family: 'Roboto', 'Open Sans', sans-serif; 
 
} 
 
/* line 17, D:/Webstorm Projects/EDIS/css/style.sass */ 
 

 
.place-holder { 
 
    display: flex; 
 
    font-size: 18pt; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
/* line 23, D:/Webstorm Projects/EDIS/css/style.sass */ 
 

 
#splash-banner { 
 
    height: 100px; 
 
    background-color: rgba(255, 0, 0, 0.2); 
 
} 
 
/* line 27, D:/Webstorm Projects/EDIS/css/style.sass */ 
 

 
#under-splash-banner { 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    flex: 1; 
 
    width: 100vw; 
 
} 
 
/* line 33, D:/Webstorm Projects/EDIS/css/style.sass */ 
 

 
#news-feed { 
 
    width: 400px; 
 
    background-color: rgba(0, 255, 0, 0.2); 
 
} 
 
/* line 37, D:/Webstorm Projects/EDIS/css/style.sass */ 
 

 
#resizable-panels { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
} 
 
/* line 42, D:/Webstorm Projects/EDIS/css/style.sass */ 
 

 
#patient-info { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 
/* line 46, D:/Webstorm Projects/EDIS/css/style.sass */ 
 

 
#order-history { 
 
    flex: 1; 
 
    background-color: rgba(0, 0, 255, 0.1); 
 
} 
 
/* line 50, D:/Webstorm Projects/EDIS/css/style.sass */ 
 

 
#health-status { 
 
    flex: 1; 
 
    background-color: rgba(0, 0, 255, 0.2); 
 
} 
 
/* line 54, D:/Webstorm Projects/EDIS/css/style.sass */ 
 

 
#to-do { 
 
    flex: 1; 
 
    background-color: rgba(0, 0, 255, 0.3); 
 
} 
 
/* line 58, D:/Webstorm Projects/EDIS/css/style.sass */ 
 

 
#timeline { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 
/* line 63, D:/Webstorm Projects/EDIS/css/style.sass */ 
 

 
#timeline-svg { 
 
    flex: 1; 
 
    border: 1px solid gray; 
 
}

<div id="under-splash-banner"> 
 
    <div class="place-holder" id="news-feed">News Feed</div> 
 
    <div id="resizable-panels"> 
 
    <div id="patient-info"> 
 
     <div class="place-holder" id="order-history">Order History</div> 
 
     <div class="place-holder" id="health-status">Health Status</div> 
 
     <div class="place-holder" id="to-do">To Do</div> 
 
    </div> 
 
    <div id="timeline" style="background: lightgray;"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

나는 현재 작업 페이지와 주변 연주하고 이러한 변경 후있어 일을하는 것 :

#news-feed { 
    display: block; 
    overflow: auto; 
}