title: Css flex sidebar slide
body: <p>I'm trying to slide the sidebar out and pull the content across but my code only does the former. I've tried animating the content too but it keeps its width and doesn't expand.</p>
  
  <p>Fairly new to flex.</p>
  
  <p><a href="https://codepen.io/anon/pen/xqvmrP" rel="nofollow noreferrer">https://codepen.io/anon/pen/xqvmrP</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="sidebar open"&gt;
  
    &lt;/div&gt;
    &lt;div class="content"&gt;
      &lt;a id="toggle" href="#"&gt;Toggle&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body,
  html {
    height: 100%;
  }
  
  .wrapper {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
    width: 900px;
    background: blue;
    margin: auto;
    overflow: hidden;
  }
  
  .sidebar {
    background: green;
    width: 300px;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  
  .sidebar.open {
    position: static;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  
  .sidebar.closed {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    //display: none;
  }
  
  .content {
    background: red;
    min-width: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('#toggle').on('click', function(e) {
    e.preventDefault();
    $('.sidebar').toggleClass('open closed');
  });
  </code></pre>