CSS overflow-x hidden and overflow-y visible

Question

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:

When I tried using following code:

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

It shows something like following result:

I dont want the scroll bar to appear.

Does Jquery has any solution for it?

Answer 1

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

Answer 2

I am not sure if you need something like this with jQuery:

$('.horiz').width($('.container').width());

where .horiz is the horizontal bar and set the width of it to the width of the .container which holds the elements.

With CSS:

HTML Markup

<div class='container'>
    <div class='horiz'></div>
    <div class='vert'></div>
</div>

CSS:

 .container {
    width:320px;
    height:320px;
    border:solid 5px green;
    overflow-x: hidden;
 }
 .horiz{
    width:500px;
    height:30px;
    background:red;
 }
 .vert{
    width:30px;
    height:500px;
    background:yellow;
    position:absolute;
    left:0;
    top:30px;
 }

and output of it:
Check the Output

Answer 3

CSS:

.class-div {
   overflow-x: clip;
   overflow-y: visible;
}

The thing with clip is, it restricts all scrolling, even programmatic ones.

Refer: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow