2列flex布局填充100％的窗口但不填充窗口溢出

Question

我遇到了两列布局（侧边栏+主要内容）的问题。目标是让这个填充100％的垂直空间。

目前它填充到窗口，但如果内容位于要求您滚动的窗口下方，则Flex容器的高度仅与窗口一样大。

请参阅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中移除高度

＆＃13;

＆＃13;

    <div id="page_container">
    	<div id="page_sidebar">This is sidebar</div>
    	<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
      
    	</div>
    </div>

＆＃13;

docStatus

＆＃13;

＆＃13;

＆＃13;

Answer 3

我认为即使内容不足以填充高度，您也需要#page_container到100％的高度。所以你可以改用min-height:100%。

注意：删除height:100%会造成麻烦，因为如果没有足够的内容，您的div不会再扩展到100％。因此，您可以安全地使用我的方法。

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

    <div id="page_container">
    	<div id="page_sidebar">This is sidebar</div>
    	<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
      
    	</div>
    </div>