Why scaled iframe scrolls horizontally

Question

I am trying to scale down an iframe element (using a css media query) to better fit my page. However when it scales down and I start interacting with the iframe my web page scrolls horizontally. The fiddle below demonstrates this issue when I am using Chrome.

https://jsfiddle.net/52tbt30j/2/

Here's the html:

<p>Before Iframe</p>

<iframe class="studyStackIframe" src="https://www.studystack.com/inewflashcard-1"
    width="850" height="440" frameborder="0" scrolling="no"
    style="background-color:pink;overflow:hidden"></iframe>

<p>After Iframe</p>

And here's the css (minus vendor prefixed attributes):

@media all  and   (max-width: 875px){

  * {
      background-color: pink;
  }    


  .studyStackIframe {
      transform: scale(0.8, 0.8);
      transform-origin: top left;
  }
}

To see the problem, resize Chrome to make the page smaller. After the pink background is displayed, continue making the window smaller so that the iframe element just fits in the area. Now click on the red and green boxes a few times. You'll notice the page scrolls horizontally so that the iframe element is not completely displayed.

(There also are some problems with the jquery animation, but I'm focusing on the scroll issue right now.)

Answer 1

.studyStackIframe {    
margin: 0 auto;
display: block;
}

On to your iframe fixes the issue