Select2 width Issue, The control overrides that parent width

I am using the Select2 control in a bootstrap grid, but when i select a values from the drop down which is a bigger value (here i mean the width), it expands and overrides the width specified by the "col-md" class of bootstrap

though there are many workarounds mentioned on a similar issue https://github.com/t0m/select2-bootstrap-css/issues/42

but none of them worked for me

please guide. how can i restrict the width to that of its container element

I've also tried various suggested workarounds with no effect. In addition, I needed the select2 control to resize correctly when the window was resized so I defined a reset_select2_size function which is invoked with each resize. Though not shown here, this function should also be invoked whenever any change in a UI component requires resetting the select2 size within that component (for example when a hidden div containing a select2 becomes visible).

This isn't pretty by any standard, but until the bug will be fixed is seems to work fine for me,

function reset_select2_size(obj)
{
    if (typeof(obj)!='undefined') {
        obj.find('.select2-container').parent().each(function() {
            $(this).find('.select2-container').css({"width":"10px"});
        });

        obj.find('.select2-container').parent().each(function() {
            var width = ($(this).width()-5)+"px";
            $(this).find('.select2-container').css({"width":width});
        });
        return;
    }

    $('.select2-container').filter(':visible').parent().each(function() {
        $(this).find('.select2-container').css({"width":"10px"});
    });
    $('.select2-container').filter(':visible').parent().each(function() {
        var width = ($(this).width()-5)+"px";
        $(this).find('.select2-container').css({"width":width});
    });
}

function onWindowResized( event )
{
    reset_select2_size();
}

window.addEventListener('resize', onWindowResized );