Did you also call the select2.min.css file?

Working example:

$('.search-select-multiple').select2({
  dropdownParent: $('#valSel')
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>


<div id="valSel" class="select2-container" data-target="open">
  <select name="select" id="select" class="search-select-multiple" multiple data-placeholder="Select one or more..." style="display: none; width: 300px;">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

I am trying to configure a Select2 Placeholder with multiple options inside a Bootstrap template.

The problem is that all of the options I select goes outside the placeholder as shown below. How can I fix it?

HTML:

            <div id="valSel" class="select2-container" data-target="open">
              <select name="select" id="select"
                class="search-select-multiple" multiple data-placeholder="Select one or more..."
                  style="display: none;">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
              </select>
            </div>

Jquery Select2:

  $('.search-select-multiple').select2({
    dropdownParent: $('#valSel')
  });