0

I have an outer div with 

overflow: hidden;

(this is given by my framework) and I am trying to override this in a specific case by giving a more specific CSS rule with

overflow-y: visible;

However, the result (FF & Chrome) is that the overflow-y gets computed to "auto", which seems to result in "scroll". So a scrollbar appears.

<div id="big" class="hider">
  <div id="long"></div>
</div>

.hider {
  overflow: hidden;
}
/* this should override the .hider CSS, but instead you get a scrollbar */
div#big {
  overflow-y: visible;
}

This is illustrated in a fiddle here http://jsfiddle.net/needlethread/4j55aqkp/

I would expect it to be either "hidden" or "visible" dependent on which CSS rule won, so where does the auto come from?

Dan
  • 1,249
  • 2
  • 16
  • 31

1 Answers1

1

Please check this answer: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

Specifically:

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.

Community
  • 1
  • 1
Nomada
  • 343
  • 2
  • 10
  • Most bizarre. In fact my case is not covered by the spec, but it looks like this explains the behaviour. – Dan Sep 17 '15 at 20:12