IFRAME with overflow:hidden still shows scrollbars in Chrome

Question

I am trying to force an IFRAME to never show scrollbars, but setting CSS attribute overflow:hidden !important is not working. Chrome's developer tools shows the applied style to be overflow:hidden, but the computed style as overflow:visible. See exact markup and CSS in screenshots below:

This seems like a bug in Chrome (this repros in Chromium, BTW). But I am still looking for a solution or workaround.

More information:

• The only scrollbar visible in the UI is the vertical one.
• Adding attribute scrolling="no" makes no difference.
• Explicitly adding overflow-x: hidden !important and overflow-y: hidden !important does not work either.
• Inline style doesn't make a difference.
• I do not control the HTML inside the IFRAME. This content is responsive (it adapts to the IFRAME's size).
• Increasing the IFRAMEs width by 5 pixels gets rid of the vertical scroll bar, but it also makes its content reflow and change layout completely.
• Chrome version is 56.0.2924.87.

Answer 1

The scrollbar being rendered isn't of the iframe tag, rather than the html tag inside the iframe. So that is where the overflow: hidden; declaration should be applied to. The iframe itself does indeed have a hidden overflow.