TailwindCSS - How to make element's dropdown not push the other elements out of the boundary in the sidebar?

I basically have a sidebar that could contain multiple sections(blue), where each section can be opened/closed and it can contain multiple items(red). When opened, I would like the expanded element not to push the other blue sections outside of the border, but to push them just against it and have the overflow-y-scroll on the expanded section . Here are the screenshots of what it looks like(1) and what it should look like(2):

Here is the code used:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<div id="container" class="h-96 w-52 overflow-hidden bg-black">
<div class="h-[100px] w-full border border-black bg-blue-500"></div>
<div id="item-container" class="h-fit space-y-1 overflow-y-scroll">
<div class="h-10 w-full bg-red-500"></div>
<div class="h-10 w-full bg-red-500"></div>
<div class="h-10 w-full bg-red-500"></div>
<div class="h-10 w-full bg-red-500"></div>
<div class="h-10 w-full bg-red-500"></div>
<div class="h-10 w-full bg-red-500"></div>
</div>
<div class="h-20 w-full border border-black bg-blue-500"></div>
<div class="h-20 w-full border border-black bg-blue-500"></div>
</div>

<style>

.h-96{
height: 24rem;
}
.w-52{
width: 13rem;
}
.overflow-hidden{
overflow: hidden;
}
.bg-black{
background-color: rgb(0 0 0);
}
.w-full{
width:100%;
}
.border{
border-width: 1px;
}
.border-black{
border-color: rgb(0 0 0);
}
.bg-blue-500{
background-color: rgb(59 130 246);
}
.h-fit{
height: fit-content;
}
.space-y-1{
margin-top: 0.25rem;
}
.overflow-y-scroll{overflow-y: scroll;}
.h-10{height: 2.5rem;}
.bg-red-500{background-color: rgb(239 68 68);}
.h-20{height: 5rem;}
.h-\[100px\]{
height:100px;
}

</style>

<!-- end snippet -->

Thank you in advance for any help provided!

You can make the container flex and make blue items unshrinkable.

• Relevant added classes for container: flex flex-col.
• For blue items: shrink-0.

<div id="container" class="h-96 w-52 overflow-hidden bg-black flex flex-col">
<div class="h-[100px] w-full border border-black bg-blue-500 shrink-0"></div>
<div id="item-container" class="space-y-1 overflow-y-scroll">
<div class="h-10 w-full bg-red-500"></div>
<div class="h-10 w-full bg-red-500"></div>
<div class="h-10 w-full bg-red-500"></div>
<div class="h-10 w-full bg-red-500"></div>
<div class="h-10 w-full bg-red-500"></div>
<div class="h-10 w-full bg-red-500"></div>
</div>
<div class="h-20 w-full border border-black bg-blue-500 shrink-0"></div>
<div class="h-20 w-full border border-black bg-blue-500 shrink-0"></div>
</div>