Динамический размер блока

Есть модальное окно, в котором присутствует выпадающий список. Как сделать так, чтобы выбранные услуги выводились полностью в блок? Сейчас размер ограничен, не пойму где. Код частично не мой, с js уже больше года не работала.

<div class="container-fluid">
    <div class="form-group col-sm-8">
      <label for="myMultiselect">Выберите услугу</label>
      <div id="myMultiselect" class="multiselect">
        <div id="mySelectLabel" class="selectBox" onclick="toggleCheckboxArea()">
          <select class="form-select">
            <option name="services">somevalue</option>
          </select>
          <div class="overSelect"></div>
        </div>
        <div id="mySelectOptions">
        @foreach($services_cat as $s_cat)
          <label name="services" class="f">
            <input type="checkbox" id="{{$s_cat->title}}" onchange="checkboxStatusChange()" value="{{$s_cat->title}}" name="services" /> <div>{{$s_cat->title}}</div>
          </label>
          @endforeach
  </div>
</div>

window.onload = (event) => {
initMultiselect();
};
function initMultiselect() {
checkboxStatusChange();

document.addEventListener("click", function(evt) {
  var flyoutElement = document.getElementById('myMultiselect'),
    targetElement = evt.target; // clicked element

  do {
    if (targetElement == flyoutElement) {
      // This is a click inside. Do nothing, just return.
      //console.log('click inside');
      return;
    }

    // Go up the DOM
    targetElement = targetElement.parentNode;
  } while (targetElement);

  // This is a click outside.
  toggleCheckboxArea(true);
  //console.log('click outside');
});
}

function checkboxStatusChange() {
var multiselect = document.getElementById("mySelectLabel");
var multiselectOption = multiselect.getElementsByTagName('option')[0];
var values = [];
var checkboxes = document.getElementById("mySelectOptions");
var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');

for (const item of checkedCheckboxes) {
  var checkboxValue = item.getAttribute('value');
  values.push(checkboxValue);
  }

var dropdownValue = "Ничего не выбрано";
if (values.length > 0) {
  dropdownValue = values.join(', ');
  }

multiselectOption.innerText = dropdownValue;
}

function toggleCheckboxArea(onlyHide = false) {
var checkboxes = document.getElementById("mySelectOptions");
var displayValue = checkboxes.style.display;

if (displayValue != "block") {
  if (onlyHide == false) {
    checkboxes.style.display = "block";
  }
} else {
  checkboxes.style.display = "none";
}



input:checked + div{
  background-color: rgb(228, 221, 200);
}

.multiselect {
width: 100%;
}

.selectBox {
position: relative;
}

.selectBox select {
width: 100%;
}

.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

#mySelectOptions {
display: none;
border: 0.5px #7c7c7c solid;
background-color: #ffffff;
max-height: 150px;
overflow-y: scroll;
}

#mySelectOptions label {
display: block;
font-weight: normal;
display: block;
white-space: nowrap;
min-height: 1.2em;
background-color: #ffffff00;
padding: 0 2.25rem 0 .75rem;
/* padding: .375rem 2.25rem .375rem .75rem; */
}

#mySelectOptions label:hover {
background-color: #1e90ff;
}