TailwindCSS - Comment faire en sorte que le menu déroulant d'un élément ne pousse pas les autres éléments hors des limites de la barre latérale ?

Question

J'ai essentiellement une barre latérale qui peut contenir plusieurs sections (bleues), chacune pouvant être activée/désactivée et pouvant contenir plusieurs éléments (rouges). Une fois ouvert, je veux que l'élément développé ne pousse pas les autres parties bleues hors de la bordure, mais les pousse hors de la bordure et fasse déborder et faire défiler la partie développée. Voici une capture d'écran de ce à quoi cela ressemble (1) et à quoi cela devrait ressembler (2) :

Voici le code utilisé :

<div id="container" class="h-96 w-52 overflow-hidden bg-black">
  <div class="h-[100px] bordure complète bordure-noir bg-bleu-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{
hauteur : 24rem ;
}
.w-52{
largeur : 13rem ;
}
.débordement caché{
débordement caché;
}
.bg-noir{
couleur d'arrière-plan : rgb(0 0 0) ;
}
.w-plein{
largeur : 100 % ;
}
.frontière{
largeur de bordure : 1 px ;
}
.border-noir{
couleur de la bordure : rgb(0 0 0) ;
}
.bg-bleu-500{
couleur d'arrière-plan : RVB (59 130 246) ;
}
.h-fit{
hauteur : contenu d'ajustement ;
}
.espace-y-1{
marge supérieure : 0,25 rem ;
}
.overflow-y-scroll{overflow-y: scroll;}
.h-10{hauteur : 2,5rem ;}
.bg-red-500{couleur de fond : rgb(239 68 68);}
.h-20{hauteur : 5rem ;}
.h-[100px]{
hauteur : 100 px ;
}

</style>

Merci d'avance pour toute aide que vous pouvez nous apporter !

Answer 1

Vous pouvez courber le récipient et empêcher les objets bleus de rétrécir.

• Ajout de classes associées pour les conteneurs : flex flex-col.
• Pour les articles bleus : 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>