select2 not responsive, width larger than container

This works for me:

$('select').select2({
    width: '100%'
});

and add CSS:

.select2-selection { overflow: hidden; }
.select2-selection__rendered { white-space: normal; word-break: break-all; }

Add to CSS "!important" if you need.

if you are using bootstrap ,use the below style

.form-group > .select2-container {
    width: 100% !important;
}

Select2 adds class .select2. You can override what script does using css. Here I'm set select2 to have 100% width, using !important. If I would not do that select2 would have 24px width.

You can further customize other classes that select2 generates using some principle.

$(document).ready(function(){
$("#mySelect").select2();
});

.select2 {
width:100%!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>

<div class="form-group">
   <label class="control-label col-md-3">Select structure</label>
   <div class="col-lg-5 col-md-9">
      <select class="form-control" id="mySelect" runat="server"></select>

   </div>
</div>