1

I want to set overflow (or both overflow-x and overflow-y) to a certain value (hidden) for general objects (*) and override overflow-x (to visible) for particular objects (foo) without changing overflow-y.

I did:

*{overflow: hidden;}
foo{overflow-x: visible;}

When I check it in Google Chrome developer's tool, for foo objects, both the specifications overflow: hidden (coming from *) and overflow-x: visible (from foo) are effective. However, visually, it seems that overflow: hidden is overriding overflow-x: visible. This is against my expectation, which is that the more specific foo specification should override the less specific * specification.

When I instead do:

*{overflow: hidden;}
foo{overflow: visible;}

Then, it seems that overflow: visible (from foo) is overriding overflow: hidden (from *), as I intended, but then, overflow-y for foo is also set to visible, which I do not want.

Is it the case that overflow specification has priority over overflow-x and overflow-y? If not, what is going on?

Edit Maybe things are more complicated than I first thought. Setting overflow-x to visible gets rid of a horizontal scroll bar, which decreases the height of the object, and that might be interfering.

Edit Looks like there is a hint in an answer to this question and this question. Particularly, it seems that by W3C specification, when either overflow-x or overflow-y is set to visible and the other is set to something else, the visible is turned into auto. It is a strange specification.
Community
  • 1
  • 1
sawa
  • 165,429
  • 45
  • 277
  • 381
  • I don't see the issue in Chrome 30 (Mac) or Firefox 23 http://jsfiddle.net/9qHeK/ (I see the first div without scroll, and the second with horizontal scroll) – Luca Rainone Nov 06 '13 at 09:21
  • Tested with chumkiu's fiddle on Chrome 30/Firefox 25 (WinXP) and no issue. – Passerby Nov 06 '13 at 09:39
  • chumkiu, Passerby Thanks for looking. Looks like it was more complicated. – sawa Nov 06 '13 at 09:42

0 Answers0