When the Chosen library is applied to an element located within an area styled with overflow: hidden, the dropdown field does not display the items properly when expanded.
The issue stems from a known problem with Chosen and overflow: hidden areas, as documented in this open issue on Chosen's GitHub repository.
One potential solution is to dynamically apply overflow: auto to parent containers when a Chosen dropdown is present in the affected area. This allows the dropdown to render correctly, as demonstrated below:
As a non-frontend developer, this is my proposed workaround. If there are better approaches or further considerations to account for, I welcome feedback.
Active
4.0
Code
I found another scenario that Chosen is also broken: