Because of Child div's height, it is resizing parent div - css

Question

My search suggestion box is not flowing all the way into the section below rather it is resizing the whole navbar. The search input is in the navigation bar. I want the search suggestions to just flow in the divs below. I have tried all the overflow property values but it is not giving me what I want.
.search-box {
position: relative;
}
.nav-search {
width: 260px;
}
.autocom-box {
background-color: white;
color: black;
width: 260px;
/* padding: 10px 8px; */
max-height: 280px;
overflow-y: auto;
border-radius: 5px;
/* opacity: 0; */
/* pointer-events: none; */
}
.search-box li {
list-style: none;
padding: 8px 12px;
cursor: default;
border-radius: 3px;
width: 100%;
/* display: none; */
overflow: auto;
}
.search-box li:hover {
background: #efefef;
}
.search-btn {
height: 38px;
width: 38px;
line-height: 38px;
position: absolute;
top: 0;
right: 0;
text-align: center;
cursor: pointer;
color: black;
margin-right: 10px;
border: none;
background: none;
}
<form class="d-flex ms-auto" action="/" method="post">
<div class="search-box">
<input
class="form-control me-2 nav-search"
autocomplete="off"
name="search"
placeholder="Type to Search..."
/>
<div class="autocom-box">
<li>Avengers</li>
<li>Avengers</li>
<li>Avengers</li>
<li>Avengers</li>
</div>
<button class="search-btn" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</form>
I've tried giving the full navbar max-height but then it tries to keep everything inside of it so it just pushes the search-box so high up it disappears.
And I've also tried position: absolute; but even that doesn't work it just messes everything up.

Answer 1

Adding position: absolute; to the pop-out window (.autocom-box) should just about do the trick:
.search-box {
position: relative;
border: 2px solid black;
}
.nav-search {
width: 260px;
}
.autocom-box {
position: absolute; /* This is the change */
background-color: white;
border: 2px solid red;
color: black;
width: 260px;
/* padding: 10px 8px; */
max-height: 280px;
overflow-y: auto;
border-radius: 5px;
/* opacity: 0; */
/* pointer-events: none; */
}
.search-box li {
list-style: none;
padding: 8px 12px;
cursor: default;
border-radius: 3px;
width: 100%;
/* display: none; */
overflow: auto;
}
.search-box li:hover {
background: #efefef;
}
.search-btn {
height: 38px;
width: 38px;
line-height: 38px;
position: absolute;
top: 0;
right: 0;
text-align: center;
cursor: pointer;
color: black;
margin-right: 10px;
border: none;
background: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<form class="d-flex ms-auto" action="/" method="post">
<div class="search-box">
<input
class="form-control me-2 nav-search"
autocomplete="off"
name="search"
placeholder="Type to Search..."
/>
<div class="autocom-box">
<li>Avengers</li>
<li>Avengers</li>
<li>Avengers</li>
<li>Avengers</li>
</div>
<button class="search-btn" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</form>
(The black border is the nav bar itself, the red border is the search window)