Setting overflow-x: hidden adds a vertical scrollbar [duplicate]

Question

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.

Answer 1

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/

Answer 2

Try setting your height. Either make it like 100%, or auto check this

jsfiddle

    height: auto;