Incorporated within this code snippet are floating selects placed inside a bootstrap grid:
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b6bbbba0a7a0a6b5a494e1fae7fae7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11737e7e65626563706151243f223f22">[email protected]</a>/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>The issue arises in the second column, with the usage of col-auto to reduce its width causing the label to overflow from the column. I attempted using overflow-visible, but as the label is absolutely positioned, it didn't resolve the problem.
Any suggestions on resolving this matter without setting a fixed width?