title: How do I scale down a div within another div using CSS?
body: <p>I'm trying to scale down a div (divB) that's inside of another div (divA). The problem is that divA's height is specified by its contents. When divB gets scaled down, the height of divA doesn't change... This happens when a transform is applied because it doesn't actually change the pixel count, it changes the size of the pixels themselves (at least I'm pretty sure that's what's happening). So the easy fix is to manually set the height of divA to be the size of divB multiplied by the scale factor. </p>
  
  <p>However, if I do this, I need to reset the height manually every time the contents of divA change. In my case, this is very cumbersome as there will be a ton of changes to divA's contents. So, I'm wondering if there is a simpler way to do this, preferably using CSS.</p>
  
  <p>Here is a simple JSFiddle to demonstrate the problem: <a href="http://jsfiddle.net/turtlewaxer1100/82cux/8/" rel="nofollow">http://jsfiddle.net/turtlewaxer1100/82cux/8/</a></p>
  
  <p>Just add some elements, scale down, and you'll see what I mean about the height not adjusting. If you click "Fix Height" then it'll adjust the height properly, but then if you add more elements the height doesn't adjust unless you fix it again...</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;div class="wrapper"&gt;
          &lt;div id="scalar"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="buttons"&gt;
          &lt;div id="button"&gt;
              &lt;input type="button" value="Add" /&gt;
          &lt;/div&gt;
          &lt;div id="scaleDown"&gt;
              &lt;input type="button" value="Scale Down" /&gt;
          &lt;/div&gt;
          &lt;div id="scaleUp"&gt;
              &lt;input type="button" value="Scale Up" /&gt;
          &lt;/div&gt;
          &lt;div id="fixHeight"&gt;
              &lt;input type="button" value="Fix Height" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.wrapper {
      float:right;
      width: 200px;
      background-color: black;
  }
  .section {
      margin-left:75px;
      height: 50px;
      width: 50px;
      background-color: red;
  }
  .buttons {
      float:left;
  }
  .scaleDown {
      -webkit-transform: scale(0.75);
      -moz-transform: scale(0.75);
      -ms-transform: scale(0.75);
      transform: scale(0.75);
      -webkit-transform-origin: 50% 0 0;
      -moz-transform-origin: 50% 0 0;
      -ms-transform-origin: 50% 0 0;
      transform-origin: 50% 0 0;
  }
  </code></pre>
  
  <p><strong>jquery</strong></p>
  
  <pre><code>var section = $("&lt;div class='section'&gt;&lt;/div&gt;")
  
  $(document).ready(function () {
      $("#button").children().click(function () {
          $("#scalar").append(section.clone(false));
      });
  
      $("#scaleDown").children().click(function () {
          $("#scalar").addClass("scaleDown");
      });
  
      $("#scaleUp").children().click(function () {
          $("#scalar").removeClass("scaleDown");
      });
  
      $("#fixHeight").children().click(function () {
          $(".wrapper").height($("#scalar").height()*.75)
      });
  });
  </code></pre>