Chosen inside a scrollable div causes div displaying scrollbar instead of overlaying content

[vkelman]

Steps to reproduce

1. Place regular select box into a div which has overflow-y: auto and relatively small height.
   Click on a select box to open it. If the height of an open select box is bigger than the height of a containing div, items in a select box are overflowing out of div, not causing div to show it's vertical scrollbar.

2. Do the same thing as in (1), but with Chosen select box. Clicking on Chosen box causes containing div to display a scrollbar. And you cannot even scroll a div to see items on a bottom of Chosen box, because clicking on a div's scrollbar automatically closes Chosen.

I see this behavior in both latest Chrome and IE 11. I'm afraid it's a difficult issue to solve. At least for me it forbids me from using Chosen inside scrollable divs.

Here are two screenshots which illustrate behavior of
a regular select https://i.imgur.com/mjwG7Kn.png
and Chosen select https://i.imgur.com/T3K7igi.png

[tjschuck]

I think this is pretty similar to this classic issue: #86

There's a lot of discussion there and some proposed workarounds from people, so hopefully something there is useful! I agree that this is probably very difficult to fix, though, since the native elements are allowed to behave in ways that regular DOM elements can't...

[vkelman]

Right,
I already googled and found #86.
Workaround could be - as somebody said there - to use absolute positioning. I'll leave this current issue open, if you don't mind, and will try to play with absolute positioning later. I'm busy now, need to produce results.