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:

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?

As you have seen the solution will be done by CSS not by jQuery. If you want to let jQuery do it for you, you will still have to understand the CSS rules for it to set the right code. As far as i know, there is no standard property in jQuery to solve this. — Ol Sen, Apr 12 '13 at 12:07
@BillyMathews Without pictures? In essence, perhaps, but the desired result is invisible to me. — Grant Thomas, Apr 12 '13 at 12:16

score 7 · Accepted Answer · answered Apr 12 '13 at 12:27

7

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

answered Apr 12 '13 at 12:27

Bill

3,478
23
42

I used these styles inside of a `position: fixed` sidebar div and added `overflow-y: scroll;` to the `.wrapper` and I could scroll up and down in the fixed div **AND** have `overflow-x` because tooltips were spilling out the side a bit. – Michael J. Calkins Sep 04 '13 at 18:20
1

it works with block or inline blocks. With float or absolute elements (like dropdown menu) it does not works. I have a scroll on y part – throrin19 Sep 22 '14 at 09:20
This still causes scrolling under a certain `line-height` threshold (which can be dictated by design). – ACJ Oct 26 '16 at 14:03

score 6 · Answer 2 · answered Jul 04 '21 at 15:01

6

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

answered Jul 04 '21 at 15:01

Anand Ramesh

61
1
2

1

clip is not supported in safari – kcsujeet Apr 08 '22 at 13:03

Jai · Answer 3 · 2022-09-19T15:21:12.233

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

CSS overflow-x hidden and overflow-y visible

3 Answers3

Linked

Related