title: iframe has scrollbars when display: inline-block is used
body: <p>So I have a page with an iframe and, in that iframe, I have a div who's height is being set to the height of the window via jquery. This element is set to <code>display: inline-block</code> so that it's width is the width of the content contained within the div as opposed to filling the page completely.</p>
  
  <p>The problem is...  when <code>display: inline-block</code> is used a scrollbar appears that doesn't appear when <code>display: block</code> is used.</p>
  
  <p>The website:</p>
  
  <p><a href="http://www.frostjedi.com/terra/scripts/demo/two-scrollbars.html" rel="nofollow">http://www.frostjedi.com/terra/scripts/demo/two-scrollbars.html</a></p>
  
  <p>The code:</p>
  
  <pre><code>&lt;body style="margin: 0; padding: 0"&gt;
    &lt;div style="width: 5000px; height: 10px; background: black"&gt;&lt;/div&gt;
    &lt;iframe src="two-scrollbars-iframe.html" style="border: 0; width: 100%; height: 100%"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>two-scrollbars-iframe.html:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
  &lt;head&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
      $(".screen").height($(window).height());
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body style="margin: 0"&gt;
  &lt;div style="width: 300px; background: green; display: inline-block" class="screen"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here it is with <code>display: block</code>:</p>
  
  <p><a href="http://www.frostjedi.com/terra/scripts/demo/two-scrollbars-2.html" rel="nofollow">http://www.frostjedi.com/terra/scripts/demo/two-scrollbars-2.html</a></p>
  
  <p>I've also noticed that even with <code>display: inline-block</code> the iframe's scrollbar goes away if I remove the 5000px wide div. Unfortunately, I can't do that in the final application I'm trying to write because I don't have any control over the "outer" frame.</p>
  
  <p>Any ideas?</p>