I have used bootstrap 5 version for this code. When you check this in full screen width the col-auto with the red border takes extra space than it’s available content. The content space inside is marked with yellow border. I wonder what causing the this space break. Can some one please help?
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/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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" id="taskTitle">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" data-select2-id="select2-data-3-0glw">Three</option>
</select>
</form>
</div>
<div class="col-auto">
<hidden id="tempprocessinstance"></hidden>
<button id="create-process-btn" 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="case-search-input" pattern="^S.*$">
</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>