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.
