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

从您的#page_container 中删除height:100%。

Answer 2

从#page_container 中移除高度

html, body{
	height: 100%;
}
#page_container{
	display: flex;
	width: 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>

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>