title: Overflow-x hidden not working in Google Chrome with iFrames
body: <p>I'm using an iFrame on the following website for the Online Booking system as shown below:</p>
  
  <p><a href="http://www.marandy.com/one2onev2" rel="nofollow">http://www.marandy.com/one2onev2</a></p>
  
  <p>The iFrame should only display a scroll bar on the y-axis. In Firefox, IE and Safari this is working as expected, however in Google Chrome this is still showing both scroll bars (y &amp; x).</p>
  
  <p>Here is the code:-</p>
  
  <p>HTML</p>
  
  <pre><code>        &lt;div id="main-online-booking"&gt;
  
              &lt;iframe id="main-online-frame" class="booking-dimensions" src="http://www.marandy.com/one2oneob/login-guest.php" frameborder="0"&gt;&lt;/iframe&gt;
  
              &lt;div id="main-online-user"&gt;
  
                  &lt;a href="#" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login.php')"&gt;&lt;img alt="One 2 One Account" id="img-onlinebooking-acc" src="images/account.png" /&gt;&lt;/a&gt;
  
                  &lt;a href="#" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login-guest.php')"&gt;&lt;img alt="One 2 One Guest" id="img-onlinebooking-guest" src="images/guest.png" /&gt;&lt;/a&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#main-online-booking {
      height: 488px;
      border-bottom: 6px #939393 solid;
      border-left: 6px #939393 solid;
      border-right: 6px #939393 solid;
      z-index: 4;
      background-color: #fff;
  }
  
  #main-online-frame {
      overflow-x: hidden;
      frameBorder: 0;
      height: 488px;
  }
  </code></pre>
  
  <p>The <code>overflow-x: hidden</code> property appears to only not be working in Google Chrome on iFrames, any suggestions?</p>