title: How do you reduce the scrollable height of a div with scaled content?
body: <p>I have a scrollable div that I zoom/scale the content of using css3 transform. It works fine if I'm zooming in (scaling up the content) but I've noticed that when scaling down, below 100%, the amount that you can scroll vertically of the container div does not reduce.</p>
  
  <p>I've made <a href="http://jsfiddle.net/SrJ59/1/" rel="nofollow">a jsfiddle to illustrate this</a></p>
  
  <p>CSS:</p>
  
  <pre><code>.scrollable
  {
      height: 250px;
      width: 250px;
      overflow: auto;
      background-color: green;
  }
  
  .content
  {
      height :500px;
      width : 500px;
      background: linear-gradient(red, blue);
      ...
  }
  </code></pre>
  
  <p>JS/jquery:</p>
  
  <pre><code>function scaleContent(newScale){
      var $content = $("#content");
      var scaleString = "scale("+newScale+")";
      //var height = (newScale&lt;1)? $("#content").height()/scale*newScale : originalHeight;
      $content.css({
      '-webkit-transform' : scaleString,
      '-webkit-transform-origin' : '0 0',
      ...
      //'height' : height +'px'
      });
      scale=newScale;
  }
  </code></pre>
  
  <p>The actual scaling and the amount that you can scroll horizontally works perfectly, but the amount you can scroll vertically doesn't change below 100%.</p>
  
  <p>Note: the amount you can scroll vertically appears to change on the first scaledown/zoomout, but this is simply because the horizontal scrollbar is removed.</p>
  
  <p>I tried to manually change the height of the content, but this just messed with the content dimensions (duh). That's the commented-out height code.</p>
  
  <p>The ellipses are where I've repeated things for other browsers.</p>