For this code, I've utilized version 5 of Bootstrap. In full screen width, the col-auto with the red border seems to be taking up more space than its content. The yellow border marks the available content space inside. I'm curious about what might be causing this issue. Could someone please offer some assistance?
html,body{
height:100%;
}
.search-field .form-control {
padding-left: 2rem;
}
.search-field .form-control-search {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.3rem;
text-align: center;
pointer-events: none;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="73111c1c0700070112035e1a101c1d0033425d42425d40">[email protected]</a>/font/bootstrap-icons.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4d4a1baa7baa7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section class="container-fluid h-100">
<div class="row flex-column h-100">
<div class="col-auto py-2 border border-danger bg-light-subtle">
<div class="row g-0 align-items-center border border-warning">
<div class="col-auto pe-2">
<div class="rounded bg-dark text-light p-1 lh-1">
<i class="bi bi-person-check align-middle lh-1"></i>
</div>
</div>
<div class="col-4 align-self-end">
<h6 class="fw-bold text-truncate pt-1">Assigned</h6>
</div>
<div class="col col-lg-4 ms-auto">
<form class="pr-2">
<select class="form-select" aria-label="Default select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form>
</div>
<div class="col-auto">
<hidden id=""></hidden>
<button id="" class="btn btn-outline-primary border-0 ms-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="align-middle" viewBox="0 0 16 16" style="">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"></path>
</svg>
</button>
</div>
<div class="col-auto form-group mb-0 search-field position-relative ps-2">
<span class="fa fa-search form-control-search"></span>
<input type="text" placeholder="Search" class="form-control text-muted search" id="">
</div>
<div class="col-auto ps-2">
<button class="btn btn-outline-primary border-0">
<i class="bi bi-grid"></i>
</button>
</div>
</div>
</div>
<div class="col position-relative bg-light" style="min-height: 0;">
</div>
</div>
</section>
</body>
</html>