Select2 textbox width misbehaving

I am having alot of trouble with select2 dropdown lists.

Im working in wordpress and my problem is that the select box does not fill its width. The wierd thing is that the dropdown arrow is at the correct position but the width of the select "textbox" is only as big as the currently selected content text.

See how the textbox is only as big as it´s content

different content

Here is my code:

HTML

<li>
            <label for="flokkur" >Flokkur <span class="required">*</span></label>
                <select name="flokkur" id="flokkur" class="sj_select2" style="width: 100%">
                    <option > Vörukaup m.Vsk</option>
                    <option > Rekstrarvörur og annar framl. kosntn. m.Vsk. </option>
                    <option> Rekstrar kostnaður húsnæðis m.Vsk. </option>
                    <option> Húsaleiga m. Vsk. </option>
                    <option> Húsaleiga án Vsk. </option>
                    <option> Gjalfærð smááhöld og búnaður m. Vsk.</option>
                    <option> Viðhald áhalda og tækja m. Vsk.</option>
                    <option> Ýmis akeypt þjónusta m. Vsk. </option>
                    <option> Ýmis skrifstofu kostnaður m. Vsk. </option>
                    <option> Lausafjár tækjaleiga m. Vsk.</option>
                    <option> Sölukostnaður auglýsingar og fl. m. Vsk.</option>
                    <option> Ýmis kostnaður með 11% Vsk. </option>
                    <option> Ýmis annar kostnaður (funda og Vsk.) án Vsk. </option>
                    <option> Risna og gjafir án Vsk.</option>
                    <option> Ferðakostnaður án Vsk. annar en rekstur bifreiðar </option>
                    <option> Rekstur bifreiðar Ökutæki án Vsk. </option>
                </select>

</li>

Javascript:

<script type="text/javascript">

jQuery(document).ready(function() {
  jQuery(".sj_select2").select2({
    width: '100%'
  });
    jQuery("#test_select").select2();
});
</script>

I have tried all sorts of solutions such as

jQuery(document).ready(function() { 
jQuery(".sj_select2").select2({ width: 'resolve' });           
});

or

jQuery(document).ready(function() { 
jQuery(".sj_select2").select2({ width: 'auto' });           
});

I have also messed alot with css to try to figue this out but so far no luck. Any help is really appreciated.