Menu
When I specify overflow-x: hidden on an element which overflows both horizontally and vertically, the element gets a vertical scroll bar in addition to hiding the horizontally overflowing content. I have tried adding overflow-y: visible and even just overflow: visible, to no effect.
Am I misunderstanding what these properties do? I would think that overflow-x should not affect the vertical overflow at all.
This has happened on every browser I've tried.
Here's a snippet which demonstrates the effect. I'm using <pre> tags because they're an easy way to create overflowing content, but it seems to happen with any tag.
pre { height: 40px; width: 150px; margin-bottom: 50px; /* We need this so they don't overlap. */ } #x-hidden { overflow-x: hidden; } #y-visible { overflow-x: hidden; overflow-y: visible; } #visible { overflow: visible; overflow-x: hidden; }<pre> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum lorem felis, sit amet sodales nunc gravida eget. Integer mollis quis magna quis vulputate. Cras aliquet convallis efficitur. </pre> <pre id="x-hidden"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum lorem felis, sit amet sodales nunc gravida eget. Integer mollis quis magna quis vulputate. Cras aliquet convallis efficitur. </pre> <pre id="y-visible"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum lorem felis, sit amet sodales nunc gravida eget. Integer mollis quis magna quis vulputate. Cras aliquet convallis efficitur. </pre> <pre id="visible"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum lorem felis, sit amet sodales nunc gravida eget. Integer mollis quis magna quis vulputate. Cras aliquet convallis efficitur. </pre>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’.
But this makes no mention of the case when overflow-x or overflow-y is set to hidden, which to me implies that this combination is indeed meant to be possible.
882
You're basically getting a double scrollbar because your giving the body min-height of 100vh AND setting an overflow. It appears this was done to keep the menu in the correct position on mobile devices.
The combination of html { overflow:auto; } and . site { overflow-x:hidden; } seems to be causing this. Remove both, if possible. (How to handle the main scrolling is best left to the browser, and not messed with by your own CSS.)
The overflow-x property in CSS specifies whether to add a scroll bar, clip the content or display overflow content of a block-level element, when it overflows at the left and right edges. In other words, this property helps us to display the content which is overflowing from the page horizontally.
Check out this answer to a related question: https://stackoverflow.com/a/6433475/3583023
It explains why
el { overflow-x: hidden; overflow-y: visible; } renders as
el { overflow-x: hidden; overflow-y: auto; } which usually renders the same as
el { overflow-x: hidden; overflow-y: scroll; } because the auto value of overflow-y is scroll in most browsers.
So, in order to achieve this effect, we can't use the overflow-x/overflow-y properties. I've experimented with the clip property as a potential alternative, but no luck so far: http://jsfiddle.net/qvEq5/
172
Try setting your height. Either make it like 100%, or auto check this
jsfiddle
height: auto; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
