2 столбца flex layout заполняет 100% окна, но не переполнение окна

Question

У меня проблема с раскладкой из двух столбцов (боковая панель + основной контент). Цель состоит в том, чтобы заполнить 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

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

Я думаю, что вам нужно высоту #page_container до 100%, даже если содержание не достаточно, чтобы заполнить высоту. поэтому вместо этого вы можете использовать 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>