I know this is a duplicated question.

And below link is the answer the most nearest with my question that I've found.

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

In this link, the W3C spec says:

The puted values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some binations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The puted value of ‘overflow’ is equal to the puted value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of puted values of ‘overflow-x’ and ‘overflow-y’.

What I want to know is, are there any new solution of this.

The problem of mine is in this fiddle.

I made 'sidebar' class of 'BootStrap' simple in a fiddle of mine.

overflow-x: visible;
//overflow-y: scroll;

You can see that I mented out 'overflow-y: scroll' of class '.panel' in css part.

In this case, 'hover' will work but 'scroll' won't.

When if I clear that ment out, 'hover' won't work but 'scroll' will.

What I wanna see is, 'hover' and 'scroll' working together.

Does anyone have any ways or ideas to fix this?

Or are there still no way to solve this problem?

I know this is a duplicated question.

And below link is the answer the most nearest with my question that I've found.

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

In this link, the W3C spec says:

The puted values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some binations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The puted value of ‘overflow’ is equal to the puted value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of puted values of ‘overflow-x’ and ‘overflow-y’.

What I want to know is, are there any new solution of this.

The problem of mine is in this fiddle.

I made 'sidebar' class of 'BootStrap' simple in a fiddle of mine.

overflow-x: visible;
//overflow-y: scroll;

You can see that I mented out 'overflow-y: scroll' of class '.panel' in css part.

In this case, 'hover' will work but 'scroll' won't.

When if I clear that ment out, 'hover' won't work but 'scroll' will.

What I wanna see is, 'hover' and 'scroll' working together.

Does anyone have any ways or ideas to fix this?

Or are there still no way to solve this problem?

• javascript
• jquery
• html
• css

4 Answers 4

Your code is working you just can't see hover because of the width you set to that block is 50px also if you set position:absolute in hover you can see that hover effect but it overlap the child item. so one thing i want to know you want same width or you just set for a demo purpose.

You could use jQuery so you will change the .panel overflow depending on the event.

Absolutely you will need a little of css hacks also,

See the updated JSfiddle.

I liked this question.

So, I have created a fiddle here: https://jsfiddle/n4tvvora/4/

Its es pretty close to what you need (I think). Let me know if it does NOT suit your requirement. We can make it better.

Code highlights:

.panel:hover ul.list:first-child {
    position: absolute;
    display: inline-block;
    height: 100%;
    width: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.panel ul.list:first-child {
    display: block;
}

I've solved this by adding 'div' between 'div' and 'ul'.

And here's my final fiddle which works almost fitting with my intent.

<div class="panel">         // added div

I hope this working will be helpful for anybody. :)