title: Two columns layout with fixed sidebar
body: <p>I try to create a two column layout with a fixed sidebar on the left and fluid content on the right. I do it with Flex, but I don't want to use absolute position - is there elegant way to do it? Or I have to use absolute? </p>
  
  <p>What I try to do is that the left sidebar is 100% height, and in the right column which is the content you can scroll down but the left side bar stays fixed 100%, like, only the right column scroll. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    height: 100%;
    padding: 0;
    margin: 0;
  }
  
  .main-container {
    padding: 0;
    margin: 0;
    list-style: none;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    /*-webkit-flex-flow: row wrap;
    justify-content: space-around;*/
  }
  
  .sideMenu {
    width: 10%;
    height: 100%;
    background-color: blue;
  }
  
  .content_area {
    width: 90%;
    background-color: green;
    min-height: 2400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main-container"&gt;
    &lt;div class="sideMenu"&gt;&lt;/div&gt;
    &lt;div class="content_area"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks. </p>