title: How to smoothly animate hiding of sidebar which effects size of other areas
body: <p>I have a screen with 3 horizontally aligned main areas:</p>
  
  <p><a href="https://i.stack.imgur.com/ZBGGh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZBGGh.png" alt="enter image description here"></a></p>
  
  <p>The sidebar (1) can be collapsed/hidden (to the left). When hidden, the freed-up space shall be given to the visualization (3) whilst the menus width (2) stays the same.</p>
  
  <p>ATM I'm aligning the content like this:</p>
  
  <ul>
  <li><strong>Parent container of (1), (2) &amp; (3):</strong> <code>display: flex</code></li>
  <li><strong>(1):</strong> <code>width: 260px;</code></li>
  <li><strong>(2):</strong> <code>width: 293px;</code></li>
  <li><strong>(3):</strong> <code>flex: 1;</code></li>
  </ul>
  
  <p>When collapsed, I simply set <code>width: 0</code> for the sidebar.</p>
  
  <p>I know that I could simply animate/transition the <code>width</code> change or go about it by changing and animating/transition the <code>left</code> property or play with margins etc. but all those solutions I can think of trigger the browsers layout step (changing <code>width</code>, <code>left</code>, <code>margin</code>, ...) which I'd like to prevent since that leads to poor animation performance as explained <a href="https://developers.google.com/web/fundamentals/performance/rendering/" rel="noreferrer">here</a>.</p>
  
  <p>Ideally I'd like to stay with CSS transitions of properties which only trigger the browsers compose step like <code>translate</code> etc.</p>
  
  <p>Unfortunately I can't think of a way to only use those "good" CSS properties and also meet my goal of redistributing the freed-up space from the hidden sidebar to the visualization (3).</p>
  
  <p>Is it even possible to hide the sidebar animated to the left without triggering a re-layout but still redistribute the freed-up space? If not, how can this still be done performantly?</p>
  
  <p>I imagine that this is a pretty common use case in web development, so links to according literature, blogs etc. are welcome as well!</p>
  
  <p>I found a lot of examples on the web regarding animated hiding of sidebars but they either animate the <code>width</code> property or don't redistribute the freed up space to the remaining visible content (e.g. sidebars which are simply shown "above" the main content etc.), so none of the examples I found so far actually meet my described goals...</p>