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

See what are you trying to achieve is not possible in css and overflow won't let you achieve this. Instead you can use jquery to get the output as you depicted in the posted picture/image.

I am not sure if you need something like this:

$('.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.

HTML Markup

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

CSS:

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

jQuery:

$(function(){
   $('.horiz').width($('.container').width());
});

and output of it:

Check the Output