2.15rem
to calc((1.55rem + 2px - .8rem)/ 2)
. Disabling this rule fixes the problems apparently:<div class="form-floating border rounded mb-7">
<select class="form-select form-select-transparent" id="test1">
<option selected>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option>
</select>
<label>Test 1</label>
</div>
<div class="form-floating border rounded mb-7">
<select class="form-select form-select-transparent" multiple id="test2">
<option selected>1</option><option selected>2</option><option selected>3</option><option selected>4</option><option selected>5</option><option selected>6</option>
</select>
<label>Test 2</label>
</div>
<script type="text/javascript">
$('#test1').select2();
$('#test2').select2();
</script>
src/sass/vendors/plugins/_select2.scss
// Floating label integration
.form-floating {
.form-select {
padding-top: $form-floating-input-padding-t !important;
}
}