TailwindCSS - 如何讓元素的下拉選單不會將其他元素推出側邊欄中的邊界？

Question

我基本上有一個可以包含多個部分（藍色）的側邊欄，其中每個部分都可以打開/關閉，並且可以包含多個項目（紅色）。打開時，我希望展開的元素不要將其他藍色部分推到邊框之外，而是將它們推到邊框之外，並在展開的部分上進行溢出 y 滾動。以下是它的外觀 (1) 和它應該是什麼樣子 (2) 的螢幕截圖：

這裡是使用的程式碼：

<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>

預先感謝您提供的任何幫助！

Answer 1

您可以使容器彎曲並使藍色項目不收縮。

• 為容器添加了相關類別：flex flex-col。
• 對於藍色物品：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>