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:

 
 
 
 
 
 
 
 
 
 
 
 
  .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; } 

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