title: Select2 multiple select shrinks inside bootstrap4 inline form
body: <p>Below is a snippet demonstrating my issue. The problem is that the field gets really small whenever I type in it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $("select").select2({
      placeholder: "Select a word",
      width: "100%"
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://select2.github.io/select2-bootstrap-theme/css/select2-bootstrap.css" rel="stylesheet"/&gt;
  
  &lt;script src="https://code.jquery.com/jquery-3.2.1.js"&gt;&lt;/script&gt;
  &lt;script
  src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
  &lt;form class="form-inline"&gt;
  &lt;div class="form-group row"&gt;
  &lt;div class="col-sm-12"&gt;
  &lt;select multiple="multiple" name="word" id="word"&gt;
    &lt;option value="1"&gt;A really long string&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I prevent the field from shrinking?</p>