title: IFRAME with overflow:hidden still shows scrollbars in Chrome
body: <p>I am trying to force an IFRAME to never show scrollbars, but setting CSS attribute <code>overflow:hidden !important</code> is not working. Chrome's developer tools shows the <strong><em>applied style</em></strong> to be <code>overflow:hidden</code>, but the <strong><em>computed style</em></strong> as <code>overflow:visible</code>. See exact markup and CSS in screenshots below:</p>
  
  <p><a href="https://i.stack.imgur.com/RsvlB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RsvlB.png" alt="Applied Style in Chrome Developer Tools"></a></p>
  
  <p><a href="https://i.stack.imgur.com/kmivk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kmivk.png" alt="Computed Style in Chrome Developer Tools"></a></p>
  
  <p>This seems like a bug in Chrome (this repros in Chromium, BTW). But I am still looking for a solution or workaround.</p>
  
  <p><strong>More information:</strong></p>
  
  <ul>
  <li>The only scrollbar visible in the UI is the vertical one.</li>
  <li>Adding attribute <code>scrolling="no"</code> makes no difference.</li>
  <li>Explicitly adding <code>overflow-x: hidden !important</code> and <code>overflow-y: hidden !important</code> does not work either. </li>
  <li>Inline style doesn't make a difference.</li>
  <li>I do not control the HTML inside the IFRAME. This content is responsive (it adapts to the IFRAME's size). </li>
  <li>Increasing the <code>IFRAME</code>s width by 5 pixels gets rid  of the <strong>vertical</strong> scroll bar, but it
  also makes its content reflow and change layout completely.</li>
  <li>Chrome version is 56.0.2924.87.</li>
  </ul>