Home/ Questions/Q 4021446
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T10:21:10+00:00

We have a base style sheet for a mobile web app where we have

  • 0

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.

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.

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.

Any ideas?

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
  <head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>         
    <meta name = "viewport" content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />

    <style>

      /* 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;
      }

    </style>
  </head>
  <body>
    <iframe src="http://starbucks.com"></iframe>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Tried overflow-x: visible; instead? Also I don’t believe the !importants are necessary.

    • 0