Wrap selected text with Select2

How can I get the selected text in Select2 to wrap instead of using an ellipsis? The option items wrap, but I'd like the input field to be able to expand down instead of over.

Here's an example:

<!-- begin snippet: js hide: false --> <!-- language: lang-js -->

$('.select2').select2();

<!-- language: lang-html -->

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select class="select2" style="width:100px">
  <option value="AL">Really long name that normally wouldn't be visible</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<!-- end snippet -->

By default Select2 adds the following code:

<!-- language: lang-css -->

.select2-selection--single {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

However, removing these properties doesn't do the trick because they are still nested in other containers.

I think it is the .select2-selection__rendered element that needs some tweaking. How about something like this ?

.select2-selection--single {
  height: 100% !important;
}
.select2-selection__rendered{
  word-wrap: break-word !important;
  text-overflow: inherit !important;
  white-space: normal !important;
}

---

<!-- begin snippet: js hide: true --> <!-- language: lang-js -->

$('.select2').select2();

<!-- language: lang-css -->

.select2-selection--single {
  height: 100% !important;
}
.select2-selection__rendered{
  word-wrap: break-word !important;
  text-overflow: inherit !important;
  white-space: normal !important;
}

<!-- language: lang-html -->

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select class="select2" style="width:100px">
  <option value="AL">Really long name that normally wouldn't be visible</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<!-- end snippet -->

Update

!important is not required. Thanks to @KyleMit for pointing it out.