TailwindCSS - Bagaimana untuk membuat menu lungsur turun elemen tidak menolak elemen lain keluar dari sempadan dalam bar sisi?
P粉505450505
2023-09-03 19:21:03
<p>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):
</p>
<p>Berikut ialah kod yang digunakan: </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-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></pre>
</p>
<p>Terima kasih terlebih dahulu untuk sebarang bantuan yang boleh anda berikan! </p>
Anda boleh membuat bekas melengkung dan mengelakkan barang biru daripada mengecut.
flex flex-col
.shrink-0
.