title: How to make scrollbar go away when element inside go back from overflow state
body: <p>All:</p>
  
  <p>I wonder how can I make a DIV recalculate the overflow when the elements inside change size, for example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function changeSize(){
      d3.select("#inner")
          .style({
              width: "195px",
              height: "195px"
          })
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;
  &lt;div style="width: 200px; height:200px; background-color: lightblue; overflow:auto;"&gt;
      &lt;div id="inner" style="width: 250px; height:250px; background-color: lightpink;"&gt;
          this is a inner eleement
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;button onclick="changeSize()"&gt;CHANGE SIZE OF INNER ELEMENT&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is:</p>
  
  <p>Initially, the <code>#inner</code> DIV make the outer container DIV overflow, but after click change size button, it becomes smaller that container DIV, but because the scrollbar of previous overflow take some space(around 17px each), the container still think the inner DIV too large, which should be not. How can I make the outer container re-determine its overflow without consider previous affect?</p>
  
  <p>Any help?</p>