2列のフレックスレイアウトはウィンドウの100％を塗りつぶしますが、ウィンドウのオーバーフローはしません

Question

2列のレイアウト（サイドバー+プライマリコンテンツ）に問題があります。目標は、これが100％の垂直スペースを埋めることです。

現在はウィンドウに表示されますが、コンテンツがウィンドウをスクロールする必要がある場合は、フレックスコンテナの高さはウィンドウと同じ大きさになります。

this jsfiddleを参照してください。サイドバーは、右下のウィンドウを埋める方法に注意してください、しかし、あなたがスクロールするときには、ウィンドウのオーバーフローに対応するために展開されません

HTML：

は

<div id="page_container"> 
    <div id="page_sidebar"></div> 
    <div id="page_primary"> 
    </div> 
</div> 

CSS：

html, body{ 
    height: 100%; 
} 
    #page_container{ 
     display: flex; 
     width: 100%; 
     height: 100%; 
     flex: 1; 
    } 
    #page_sidebar{ 
     flex: 0 0 220px; 
     background-color: #2E3254; 
    } 
    #page_primary{ 
     flex: 1; 
     background-color: #F8F9FA; 
    } 

Answer 1

height:100%を削除します#page_containerから

Answer 2

私はあなたがコンテンツが高さを埋めるには十分でない場合であっても#page_container〜100％の高さが必要だと思い#page_containerから

html, body{ 
 
\t height: 100%; 
 
} 
 
#page_container{ 
 
\t display: flex; 
 
\t width: 100%; 
 
\t flex: 1; 
 
} 
 
#page_sidebar{ 
 
\t flex: 0 0 220px; 
 
\t background-color: #2E3254; 
 
} 
 
#page_primary{ 
 
\t flex: 1; 
 
\t background-color: #F8F9FA; 
 
}

<div id="page_container"> 
 
    \t <div id="page_sidebar">This is sidebar</div> 
 
    \t <div id="page_primary"> 
 
     This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content 
 
     
 
    \t </div> 
 
    </div>

Answer 3

高さを削除します。代わりにmin-height:100%を使用することができます。

注：height:100%を削除すると、十分なコンテンツがないとdivが100％に拡大されなくなるため、問題が発生します。したがって、私の方法を安全​​に使うことができます。あなただけの `高さを削除する場合

html, body{ 
 
\t height: 100%; 
 
} 
 
#page_container{ 
 
\t display: flex; 
 
\t width: 100%; 
 
\t min-height:100%; 
 
\t flex: 1; 
 
} 
 
#page_sidebar{ 
 
\t flex: 0 0 220px; 
 
\t background-color: #2E3254; 
 
} 
 
#page_primary{ 
 
\t flex: 1; 
 
\t background-color: #F8F9FA; 
 
}

<div id="page_container"> 
 
    \t <div id="page_sidebar">This is sidebar</div> 
 
    \t <div id="page_primary"> 
 
     This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content This is primary content 
 
     
 
    \t </div> 
 
    </div>