Click here to Skip to main content
15,938,446 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have a dropdown inside a div.
the div has an overscroll property set to scroll.
The problem is that it cuts off the dropdown elements. If I don't apply overflow the dropdown elements appear as expected.

P.S. I cannot change the height of the div. I must achieve this without changing the height.

This is how I want :

This is what I am getting :


What I have tried:

<div style="overflow-y: scroll; height: 427px">
// dropdown inside 
Updated 29-Nov-22 22:27pm
Graeme_Grant 30-Nov-22 3:44am    
There is not enough information here for us to see what is happening. The best thing to do is open the developer tools in the web browser and you can debug what is happening.

1 solution

Until the popover API[^] is adopted by all major browsers - which is still a loooong way off - an element cannot escape the bounds of it's nearest ancestor block formatting context[^].

If you want a custom "drop-down" element to appear outside of the element with overflow-y:scroll set, you will need to move the dropdown element outside of the overflow element, either in the markup or by using Javascript.

(You could try using the popover polyfill[^] library; but it would almost certainly be simpler to write a specific script for your particular case instead.)
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900