title: How can I have a position: fixed; behaviour for a flexbox sized element?
body: <p>I have a div called .side-el which I would like to have in a position: fixed; behavior, but as soon as I apply position fixed the width alternates from the right one. The right width would be the one set by flexbox. How can I achieve this goal?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    
    * {
      box-sizing: border-box;
      -webkit-flex-grow: 1;
      flex-grow: 1;
      -webkit-flex-shrink: 0;
      flex-shrink: 0;
    }
  }
  
  
  .main-el {
    box-sizing: border-box;
    padding:0 2em;
    width: 70%;
  }
  
  .side-el {
    box-sizing: border-box;
    width: 30%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container" style="background-color: blue; height: 100px;"&gt;
    &lt;div class="main-el"&gt;
      &lt;div  style="background-color: red; height: 1000px;"&gt;content&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="side-el" &gt;
      &lt;div style="background-color: red; height: 100px;"&gt;content&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>