title: How to wrap parent DIV around scaled child DIV
body: <p>I have a parent div wrapped around a scaled child div. The child div starts off with <code>transform:scale(0,0);</code> &amp; expands to <code>transform:scale(1,1);</code> when a button is clicked.</p>
  
  <pre><code>.content-wrapper {
    display: inline-block;
    background-color: #ddf;
    padding: 10px;
    clear: both;
  }
  
  .content {
    padding: 10px;
    background-color: #fff;
    display: flex-block;
    overflow: hidden;
    transform:scale(0,0);
    transform-origin:top; 
    transition:transform 1s ease-out; 
  
  }
  
  .content.open {
    transform:scale(1,1);
  }
  </code></pre>
  
  <p>However the parent div <code>content-wrapper</code> stays at the same size of the child div <code>content</code> - even when the child is "closed".</p>
  
  <p><a href="https://i.stack.imgur.com/3EqQm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3EqQm.png" alt="enter image description here"></a></p>
  
  <p>The desired behaviour is when the child div is closed the parent div shrinks to only wrap around the button.</p>
  
  <p><a href="https://i.stack.imgur.com/flWcV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/flWcV.png" alt="enter image description here"></a></p>
  
  <p><a href="http://jsfiddle.net/BaronGrivet/ztxa5kwu/28/" rel="nofollow noreferrer">JSFiddle of Example</a></p>
  
  <p>Is it possible to wrap the parent div around the child div when it's "closed" in this example?</p>