This markup contains floating selects inside a bootstrap grid:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container w-50 mt-4">
<div class="row">
<div class="col">
<div class="form-floating">
<select class="form-select" id="a">
<option value="" selected=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label for="a">Foo Bar Baz</label>
</div>
</div>
<div class="col-auto">
<div class="form-floating">
<select class="form-select" id="b">
<option value="" selected=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label for="b">Spam Ham Eggs</label> <!-- this overflows -->
</div>
</div>
</div>
</div>Notice how the second column has col-auto to minimise its width, but then the label overflows the column. I tried overflow-visible but that doesn’t help – because the label is absolutely positioned.
Is there some way to fix this (without hardcoding a width)?