TailwindCSS - 要素のドロップダウン メニューがサイドバーの他の要素を境界外に押し出さないようにするにはどうすればよいですか?
<p>基本的に、複数のセクション (青) を含めることができるサイドバーがあり、各セクションはオン/オフにすることができ、複数の項目 (赤) を含めることができます。開いたときに、展開された要素が他の青い部分を境界線の外に押し出すのではなく、境界線の外に押し出して、展開された部分でオーバーフロースクロールを実行するようにします。これは、どのように見えるか (1) とどのように見えるか (2) のスクリーンショットです。
</p>
<p>使用するコードは次のとおりです: </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-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>
<スタイル>
.h-96{
高さ: 24レム;
}
.w-52{
幅: 13レム;
}
.overflow-hidden{
オーバーフロー: 非表示;
}
.bg-black{
背景色: rgb(0 0 0);
}
.w-フル{
幅:100%;
}
。国境{
境界線の幅: 1px;
}
.border-black{
境界線の色: rgb(0 0 0);
}
.bg-blue-500{
背景色: rgb(59 130 246);
}
.h-フィット{
高さ: フィットコンテンツ;
}
.space-y-1{
マージントップ: 0.25rem;
}
.overflow-y-scroll{overflow-y: スクロール;}
.h-10{高さ: 2.5rem;}
.bg-red-500{背景色: rgb(239 68 68);}
.h-20{高さ: 5レム;}
.h-\[100px\]{
高さ:100ピクセル;
}
</style></pre>
</p>
<p>何かございましたら、よろしくお願いいたします。 </p>
