フレックスボックスの成長を制限する方法は？

Question

将来のd3ダッシュボードのセクションを、ではなく、ではなく、ページの両側にスクロールさせたいと考えています。これまで正しく機能しています（see here）。また、赤いバーは一定の高さを維持し、緑色の列はビューポートのサイズ変更（現在は行っています）に一定の幅を維持するようにします。

また、色付きのボックスのそれぞれが内容（表のデータ行）でいっぱいになり、インターフェイス全体のサイズに影響を与えないように、内部でスクロールする必要があります。しかし、ニュースフィードのdivに要素を追加すると、右側に表示されるようになります。この問題を示すrunnable gistがあります。

むしろより<p>タグの例スタックは全体親DIV <div id="under-splash-banner">の高さを変更する（どのように他の青色ボックス結果として、すべてのストレッチに気付く）との全体高さに沿って垂直スクロールバーを作成します私は緑色のニュースフィード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; 
}