Search code examples
jquerycssoverflow

CSS overflow-x hidden and overflow-y visible

I have read this SO Post: css overflow-x visible and overflow-y hidden causes scroll bar.

Also I have gone through: http://www.brunildo.org/test/Overflowxy2.html

I want to achieve something as follows:

Overflow

When I tried using following code:

overflow-x: hidden;
overflow-y: visible;

It shows something like following result:
Overflow 2
I dont want the scroll bar to appear.

Does Jquery has any solution for it?

Solution

  • You can do this with CSS like this:

    HTML:

    <div class="wrapper">
    <div class="inner">
    </div>
</div>

    CSS:

    .wrapper{
    width: 400px;
    height: 300px;
}
.inner{
    max-width: 100%;
    overflow-x: hidden;
}

    Now your .wrapper div will have overflow: visible; but your .inner div will never overflow because it has a maximum width of 100% of the wrapper div. Note that your wrapper must have an explicitly defined width.

    Here is a working jsFiddle