【发布时间】：2015-07-25 16:07:12
【问题描述】：
我想使用 flexbox 创建侧边栏和主要内容区域。侧边栏的高度至少应为窗口的高度。但是，如果内容高度大于窗口，则侧边栏的高度应该增长到与内容的高度相匹配。这个想法是，当我们滚动查看所有内容时，侧边栏应该看起来好像它延伸到与内容相同的高度。
这是我的尝试：http://codepen.io/nareshbhatia/pen/QbZqyd。使窗口宽度非常小。不幸的是，侧边栏只延伸到窗口高度。此外，当我向下滚动时，内容区域会失去其背景颜色。
这是完整的代码：
HTML
<div class="flex-container">
<div class="sidenav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class="content">
lorem ipsum lorem ...
</div>
</div>
CSS
html, body {
margin: 0;
height: 100%;
}
.flex-container {
display: -webkit-flex;
display: flex;
background-color: red;
height: 100%;
}
.sidenav {
background-color: lightgray;
-webkit-flex: 1;
flex: 1;
}
.content {
background-color: lightblue;
padding: 10px;
-webkit-flex: 5;
flex: 5;
}
【问题讨论】：