TailwindCSS – Wie kann ich dafür sorgen, dass das Dropdown-Menü eines Elements andere Elemente in der Seitenleiste nicht außerhalb der Grenzen drängt?

Question

Grundsätzlich habe ich eine Seitenleiste, die mehrere Abschnitte (blau) enthalten kann, von denen jeder ein-/ausgeschaltet werden kann, und die mehrere Elemente (rot) enthalten kann. Beim Öffnen möchte ich, dass das erweiterte Element die anderen blauen Teile nicht aus dem Rahmen schiebt, sondern sie aus dem Rahmen schiebt und einen Überlauf-Y-Scroll auf dem erweiterten Teil ausführt. Hier ist ein Screenshot davon, wie es aussieht (1) und wie es aussehen sollte (2):

Hier ist der verwendete Code:

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

.h-96{
Höhe: 24rem;
}
.w-52{
Breite: 13rem;
}
.Überlauf versteckt{
Überlauf versteckt;
}
.bg-schwarz{
Hintergrundfarbe: rgb(0 0 0);
}
.w-full{
Breite: 100 %;
}
.Grenze{
Randbreite: 1px;
}
.border-black{
Rahmenfarbe: rgb(0 0 0);
}
.bg-blue-500{
Hintergrundfarbe: rgb(59 130 246);
}
.h-fit{
Höhe: fit-content;
}
.space-y-1{
Rand oben: 0,25rem;
}
.overflow-y-scroll{overflow-y: scroll;}
.h-10{Höhe: 2,5rem;}
.bg-red-500{Hintergrundfarbe: rgb(239 68 68);}
.h-20{height: 5rem;}
.h-[100px]{
Höhe: 100 Pixel;
}

</style>

Vielen Dank im Voraus für jede Hilfe, die Sie leisten können!

Answer 1

您可以使容器弯曲并使蓝色项目不收缩。

• 为容器添加了相关类：flex flex-col。
• 对于蓝色物品：shr​​ink-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>