title: CSS Flex full height sidebar
body: <p>I'm trying to make sidebar with background, where its height is same as height of <strong>#page-content</strong> but I can't make it work. The Sidebar height is still same as its content.</p>
  
  <p>Here is the css code:</p>
  
  <pre><code>.flexbox {
      display: -webkit-flex !important;
      display: -ms-flexbox !important;
      display: flex !important;
      overflow: hidden !important;
  }
  .flexbox .flexbox-col {
      flex: 1;
  }
  
  
  &lt;div id="mainWrapper" class="main-grid clearfix flexbox"&gt;
     &lt;div id="sidebar" class="opened left flexbox-col"&gt;&lt;/div&gt; 
     &lt;div id="page-content" class="page-content flexbox-col"&gt;
  &lt;/div&gt;
  </code></pre>