TailwindCSS - Bagaimana untuk membuat menu lungsur turun elemen tidak menolak elemen lain keluar dari sempadan dalam bar sisi?

Question

Saya pada asasnya mempunyai bar sisi yang boleh mengandungi berbilang bahagian (biru), setiap satunya boleh dihidupkan/dimatikan dan boleh mengandungi berbilang item (merah). Apabila dibuka, saya mahu elemen yang dikembangkan tidak menolak bahagian biru yang lain keluar dari sempadan, tetapi menolaknya ke luar sempadan dan melakukan limpahan y menatal pada bahagian yang dikembangkan. Berikut ialah tangkapan skrin rupa (1) dan rupa yang sepatutnya (2):

Berikut ialah kod yang digunakan:

<div id="container" class="h-96 w-52 overflow-hidden bg-black">
  <div class="h-[100px] w-sempadan penuh sempadan-hitam bg-biru-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-sempadan penuh sempadan-hitam bg-biru-500"></div>
  <div class="h-20 w-sempadan penuh sempadan-hitam bg-biru-500"></div>
</div>
<gaya>

.h-96{
ketinggian: 24rem;
}
.w-52{
lebar: 13rem;
}
.overflow-hidden{
limpahan: tersembunyi;
}
.bg-black{
warna latar belakang: rgb(0 0 0);
}
.w-full{
lebar: 100%;
}
.sempadan{
lebar sempadan: 1px;
}
.border-black{
warna sempadan: rgb(0 0 0);
}
.bg-blue-500{
warna latar belakang: rgb(59 130 246);
}
.h-fit{
ketinggian: muat-kandungan;
}
.space-y-1{
jidar atas: 0.25rem;
}
.overflow-y-scroll{overflow-y: scroll;}
.h-10{ketinggian: 2.5rem;}
.bg-red-500{warna-latar belakang: rgb(239 68 68);}
.h-20{ketinggian: 5rem;}
.h-[100px]{
ketinggian:100px;
}

</style>

Terima kasih terlebih dahulu untuk sebarang bantuan yang boleh anda berikan!

Answer 1

Anda boleh membuat bekas melengkung dan mengelakkan barang biru daripada mengecut.

• Tambah kelas berkaitan untuk bekas: flex flex-col.
• Untuk item biru: 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>