<p>我基本上有一個可以包含多個部分（藍色）的側邊欄，其中每個部分都可以打開/關閉，並且可以包含多個項目（紅色）。打開時，我希望展開的元素不要將其他藍色部分推到邊框之外，而是將它們推到邊框之外，並在展開的部分上進行溢出 y 滾動。以下是它的外觀 (1) 和它應該是什麼樣子 (2) 的螢幕截圖： </p> <p>這裡是使用的程式碼：</p> <p> <pre class="brush:html;toolbar:false;"><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></pre> </p> <p>預先感謝您提供的任何幫助！ </p>