title: Overriding overflow-x CSS property on iOS
body: <p>We have a base style sheet for a mobile web app where we have html and body set to overflow-x:hidden to prevent any horizontal scrolling.</p>
  
  <p>However on 1 page, we have an iframe that opens external sites, some of which are not necessarily mobile optimized, so we want to allow horizontal scrolling.</p>
  
  <p>I thought I could just override the overflow-x:hidden, with overflow-x:auto !important, but it doesn't work.  The only way I can make it work is remove all notion of overflow-x, and the scrolling works fine.  It also works as expected in Safari + Chrome.</p>
  
  <p>Any ideas?</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;meta http-equiv='Content-Type' content='text/html;charset=utf-8'/&gt;         
      &lt;meta name = "viewport" content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" /&gt;
  
      &lt;style&gt;
  
        /* Styles from existing style sheet */
        html, body {
          position:relative;
          height:100%;
          width:100%;
          padding:0;
          margin:0;
          overflow-x:hidden;
        }
  
        /* Overrides */
        html, body{
          width:auto !important;
          height:auto !important;
          overflow-x:auto !important;
        }
  
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;iframe src="http://starbucks.com"&gt;&lt;/iframe&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>