title: Angular Material Design - Fixed Side Bar
body: <p>How do i create a fixed side bar and a scrollable content. Like shown on their website.</p>
  
  <p><a href="https://material.angular.io/components/" rel="nofollow noreferrer">https://material.angular.io/components/</a></p>
  
  <p>I tried using this - <a href="https://material.angular.io/components/sidenav/examples" rel="nofollow noreferrer">https://material.angular.io/components/sidenav/examples</a></p>
  
  <p>But it forces you to set the width and the height which i dont want to do as i want to use the full browser width and it be responsive.</p>
  
  <pre><code>.example-sidenav-fab-container {
    width: 500px;
    height: 300px;
    border: 1px solid rgba(0, 0, 0, 0.5);
  }
  </code></pre>