onclick attribute not working with flexbox
<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>