I would like to use flexbox to create a sidebar and a main content area. The height of the sidebar should be at least that of the window. However, if the content height is larger than the window, then the height of the sidebar should grow to match that of the content. The idea is that when we scroll to see all the content, the sidebar should appear as if it extends to the same height as that of the content.
Here's my attempt: http://codepen.io/nareshbhatia/pen/QbZqyd. Make the window width really small. Unfortunately the sidebar extends only upto the window height. Also when I scroll down, the content area looses its background color.
Here's the full code:
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;
}
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
