Fix height and overflow hidden problem in Firefox

August 13, 2010

The problem
Older versions of Firefox (for instance 3.0) doesn't handle overflow:hidden very well. It seems to ignore the style if it contains elements (like Flash object) that is larger than the specified height and/or width. It works well in the latest versions of Firefox (3.5+) as well as IE7/8.

Here's a sample of the problem. The whole 650 pixels high Flash object will be shown, eventhough the div containing it has overflow set to hidden.

<div>
  <div style="width: 100%; height: 550px; overflow: hidden;">
    <div style="width: 100%;">
      <embed height="650" width="100%" src="/MyFlash.swf" type="application/x-shockwave-flash">
    </div>
  </div>
</div>

The solution
The solution is simple, although not quite logical. If you add a overflow:auto style to a div outside the one you have overflow:hidden it magicly solves the problem:

<div style="overflow: auto;">
  <div style="width: 100%; height: 550px; overflow: hidden;">
    <div style="width: 100%;">
      <embed height="650" width="100%" src="/MyFlash.swf" type="application/x-shockwave-flash">
    </div>
  </div>
</div>

Fix height and overflow hidden problem in Firefox

Related posts: