title: onclick attribute not working with flexbox
body: <p>So i am trying to create a simple side-nav with flexbox...
  when the blue div.. is clicked I want the red div to change from a width "flex" of 0 to 1 which is "50%"....
  my code is below but I will also include a codepen...</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container flex"&gt;
  &lt;div class="blue" onclick="clickBlue();"&gt;&lt;/div&gt;
  &lt;div class="red"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.container{background:rgba(0,0,0,.1); width:100%; height:100px;}
  .blue{background:rgba(0,0,250,.2); flex:1; height:100px;}
  .red{background:rgba(250,0,0,.4); flex:1; height:100px;}
  .flex{display:flex; justify-content:center; align-items:center;}
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function(){
  function clickBlue(){ 
  $(".red").css("flex","1");
  }
  });
  </code></pre>
  
  <p><a href="http://codepen.io/gebrutommy/pen/bwEGBv" rel="nofollow">http://codepen.io/gebrutommy/pen/bwEGBv</a></p>