CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

by

After some serious searching it seems i’ve found the answer to my question:

from: http://www.brunildo.org/test/Overflowxy2.html

In Gecko, Safari, Opera, ‘visible’
becomes ‘auto’ also when combined with
‘hidden’ (in other words: ‘visible’
becomes ‘auto’ when combined with
anything else different from
‘visible’). Gecko 1.8, Safari 3, Opera
9.5 are pretty consistent among them.

also the W3C spec says:

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’.

Short Version:

If you are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.

More Related Contents:

  1. CSS margin terror; Margin adds space outside parent element [duplicate]
  2. Make background color extend into overflow area
  3. Can specific text character change the line height?
  4. How to display scroll bar onto a html table
  5. CSS margin adds space outside parent element [duplicate]
  6. CSS overflow:hidden with floats
  7. Position absolute and overflow hidden
  8. IE6 + IE7 CSS problem with overflow: hidden; – position: relative; combo
  9. Flexbox affects overflow-wrap behavior
  10. How can I truncate table cells, but fit as much as content possible?
  11. Can overflow:hidden affect layout?
  12. How to prevent text from overflowing in CSS?
  13. Generate scroll bar for overflow to the left
  14. How do I remove the horizontal scrollbar in a div?
  15. Flexbox layout with two equal height children, one containing nested flexbox with scrolling content
  16. Why not use tables for layout in HTML? [closed]
  17. How can I position my div at the bottom of its container?
  18. Make CSS Hover state remain after “unhovering”
  19. Why is ‘position: sticky’ not working with Core UI’s Bootstrap CSS
  20. How to add 1px margin to a flex item that is flex: 0 0 25%?
  21. Are you allowed to nest a link inside of a link?
  22. Using custom HTML Tags
  23. How can I display the checkbox over the images for selection?
  24. Should I size a textarea with CSS width / height or HTML cols / rows attributes?
  25. CSS filter:invert not working with background-color
  26. CSS position absolute and full width problem
  27. Size of font in CSS with slash
  28. word-wrap break-word does not work in this example
  29. How to place Text and an Image next to each other in HTML?
  30. How to always show the vertical scrollbar in a browser?

Leave a Comment