title: How to make full height sidebar with dynamic main content?
body: <p>I have an angular2 app with left a sidebar and dynamic main content.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="full_height"&gt;
    &lt;div class="sidebar"&gt;Some content&lt;/div&gt;
    &lt;div class="main"&gt;Some dynamic content&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{
    width:          100%;
    height:         100%;
    margin:         0;
  }
  .full_height{
      display:        flex;
      flex-direction: row;
      align-items:    stretch;
  }
  .sidebar{
    background: black;
    color: white;
    width: 150px;
    flex: 0 0 auto;
  }
  .main{
    flex: 1 1 auto;
  }
  </code></pre>
  
  <p>I need the sidebar grow to 100% height of the browser body if no information in the main block. And I need the sidebar and the main block have equal height when a big amount of information have been loaded to the main block via AJAX.  </p>
  
  <p>How to make the first part work?</p>
  
  <p><a href="http://jsfiddle.net/9w9j6oa8/" rel="nofollow noreferrer">JSFiddle</a></p>