title: How can I smoothly slide a flexbox side panel offscreen?
body: <p>I have a fairly simple flex layout built on Angular Material. It has a side panel that can be slid offscreen. I'm currently using negative margins to handle that so that the main content box follows its movement with a width adjustment, which <a href="https://jsfiddle.net/isherwood/d4L0umqs/" rel="nofollow">works well</a>. However, this results in animation that's not smooth. Apparently it's more of a chore for the graphics rendering mechanism than translation. </p>
  
  <p>How can I accomplish the same using <code>translateX</code>? Here's my demo layout:</p>
  
  <pre><code>&lt;div ng-app="sandbox" layout="row" class="wrapper" ng-class="{'sidebar-out': sidebarOut}"&gt;
      &lt;div flex="60" class="main md-padding"&gt;
          &lt;h1&gt;Main Content&lt;/h1&gt;
          &lt;button class="toggler" ng-click="sidebarOut=!sidebarOut"&gt;Toggle sidebar&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div flex="40" class="sidebar md-padding"&gt;
          &lt;h2&gt;Sidebar&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The sidebar movement is handled with simple Angular directives and CSS:</p>
  
  <pre><code>.sidebar-out .sidebar {
      transform: translateX(40vw)
  }
  </code></pre>
  
  <p><strong><a href="https://jsfiddle.net/isherwood/o7e8kL0p/" rel="nofollow">Fiddle demo</a></strong></p>
  
  <p>The problem is that the main content box doesn't adjust size as the sidebar translates off screen. How can I make that happen? Thanks heaps.</p>