title: How to create a sidebar and content area using flexbox?
body: <p>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.</p>
  
  <p>Here's my attempt: <a href="http://codepen.io/nareshbhatia/pen/QbZqyd" rel="nofollow">http://codepen.io/nareshbhatia/pen/QbZqyd</a>. 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.</p>
  
  <p>Here's the full code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="flex-container"&gt;
      &lt;div class="sidenav"&gt;
          &lt;ul&gt;
              &lt;li&gt;Item 1&lt;/li&gt;
              &lt;li&gt;Item 2&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
          lorem ipsum lorem ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>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;
  }
  </code></pre>