title: Is it possible to collapse an outer <div> around CSS scaled content?
body: <p>I have scaled content within an unscaled <code>&lt;div&gt;</code>:</p>
  
  <pre><code>&lt;style&gt;
  #outer { 
      background-color: blue; 
      padding: 3px;
  }
  #inner { 
      background-color: red;
      width: 400px; 
      height: 400px; 
      -moz-transform: scale(0.5);
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
  }
  &lt;/style&gt;
  
  &lt;div id=outer&gt;
      &lt;div id=inner&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/woef9.png" alt="Outer div wapping original inner div size"></p>
  
  <p>Here's a <a href="http://jsfiddle.net/KeithHenry/2kYL4/" rel="nofollow noreferrer">JS Fiddle</a> too.</p>
  
  <p>The problem is that outer <code>&lt;div&gt;</code> - following the <code>transform: scale</code> the inner <code>&lt;div&gt;</code> is 200px in size, but the outer <code>&lt;div&gt;</code> still wraps the original size of 400px.</p>
  
  <p>I want to collapse the size of the outer <code>&lt;div&gt;</code> to wrap the scaled content, so it should look something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/HwRUs.png" alt="Outer div collapses to the scaled size with padding"></p>
  
  <p>In the application the scale property is changed dynamically, and the div contains content that should scale with it.</p>
  
  <p>Is there any way to do this with CSS?</p>
  
  <p>Failing that is there any way to do this with Javascript?</p>