title: Flexbox sidemenu
body: <p>The following implementation i came up with for a sidemenu works fine</p>
  
  <p><a href="https://jsbin.com/getotijela/edit?html,css,output" rel="nofollow noreferrer">https://jsbin.com/getotijela/edit?html,css,output</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
  
  &lt;div class="container"&gt;
  &lt;div class="menu"&gt;
      a
  &lt;/div&gt;
  
  &lt;div class="content"&gt;
      &lt;span id="clickable"&gt;
          basdasdasdasdas
      &lt;/span&gt;
  &lt;/div&gt;
  &lt;div&gt;
  
  &lt;script&gt;
  
  document.getElementById("clickable").addEventListener('click',function(){
      var el = document.getElementsByClassName("menu")[0]
      el.className  = "menuClosed"
  })
  
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.test{
      background-color:red;
  }
  
  .container{
      display:flex;
      flex-direction: row;
      position:relative;
      height:100%;
  }
  
  .menu{
      width:200px;
      /* left:20px; */
      background-color:red;
  }
  
  .menuClosed{
      width:0px;
      background-color:red;
      transition: 0.3s all;
  }
  
  
  .content{
      background-color:yellow;
      flex:1;
  }
  </code></pre>
  
  <p>but what it does is collapse the sidemenu to a <code>width</code> of <code>0</code> ( as i've instructed it to). What i was aiming for was: having the sidemenu move to the left as many units as it's width, something that in the past i would achieve by modifying the <code>left</code>css property.</p>
  
  <p>In other words, i dont want the menu to collapse to a width of 0, just have it move out of sight</p>
  
  <p>How could i achieve something similar to that in flexbox if at all?</p>