Chosen multiselect gets "cut" when placed in area with overflow flow or hidden

 //////////// JS
<script type="text/javascript">
    $(document).ready(function () {
  $('.select-chosen').chosen({
        width: "150px"
    });
        FixChosenOverHidden($('.select-chosen'));
    });
 
    function FixChosenOverHidden($chosenSelect) {
        // Disable mouse scroll if its dropdown is open.
        $chosenSelect
            .bind('chosen:showing_dropdown', function () {
                $(this).next('.chosen-container')
                    .bind("mousewheel", function () {
                        return false;
                    });
            })
            .bind('chosen:hiding_dropdown', function () {
                $(this).next('.chosen-container')
                    .unbind('mousewheel');
            });
 
        // Reposition the dropdown to fixed, so it's always on top.
        $('.chosen-container')
            .bind('mouseenter.chosen', function () {
                var x = $(this).offset().left,
                    y = $(this).offset().top + $(this).height(),
                    w = $(this).width(),
                    $dropdown = $(this).find('.chosen-drop');
 
                // If the menu is partially visible, don't change
                // its dropdown to be fixed. This is only needed if your
                // chosen menu might be clipped by a div or something.
 
                // Find all the parents that might be clipping off.
                var parents = $(this).parents().filter(function () {
                    var overflow = $(this).css('overflow');
                    return overflow === 'auto' || overflow === 'hidden' || overflow === 'scroll';
                });
 
                // If at least one parent is clipping off the bottom of
                // the menu, don't proceed any further.
                for (var i = 0; i < parents.length; i++) {
                    var parentEdge = $(parents[i]).offset().top + $(parents[i]).outerHeight();
                    if (y > parentEdge) {
                        $dropdown.css({ 'display': 'none' });
                        return false;
                    }
                }
 
                $dropdown.addClass('fixed')
                    .css({ 'top': y, 'left': x, 'width': w });
            })
            .bind('mouseleave.chosen', function () {
                $(this).find('.chosen-drop')
                    .removeClass('fixed')
                    .attr('style', '');
            });
    }
</script>
///////////////////// HTML
<select class="select-chosen">
        <option>1 A</option>
        <option>2 B</option>
        <option>3 C</option>
        <option>4 A</option>
        <option>5 B</option>
        <option>6 C</option>
        <option>7 A</option>
        <option>8 B</option>
        <option>9 C</option>
        <option>10 A</option>
        <option>1 B</option>
        <option>2 C</option>
        <option>3 A</option>
        <option>4 B</option>
        <option>5 C</option>
    </select>