TailwindCSS - 如何使元素的下拉菜单不会将其他元素推出侧边栏中的边界?
P粉505450505
2023-09-03 19:21:03
<p>我基本上有一个可以包含多个部分(蓝色)的侧边栏,其中每个部分都可以打开/关闭,并且可以包含多个项目(红色)。打开时,我希望展开的元素不要将其他蓝色部分推到边框之外,而是将它们推到边框之外,并在展开的部分上进行溢出 y 滚动。以下是它的外观 (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>
<style>
.h-96{
height: 24rem;
}
.w-52{
width: 13rem;
}
.overflow-hidden{
overflow: hidden;
}
.bg-black{
background-color: rgb(0 0 0);
}
.w-full{
width:100%;
}
.border{
border-width: 1px;
}
.border-black{
border-color: rgb(0 0 0);
}
.bg-blue-500{
background-color: rgb(59 130 246);
}
.h-fit{
height: fit-content;
}
.space-y-1{
margin-top: 0.25rem;
}
.overflow-y-scroll{overflow-y: scroll;}
.h-10{height: 2.5rem;}
.bg-red-500{background-color: rgb(239 68 68);}
.h-20{height: 5rem;}
.h-\[100px\]{
height:100px;
}
</style></pre>
</p>
<p>预先感谢您提供的任何帮助!</p>
您可以使容器弯曲并使蓝色项目不收缩。
flex flex-col
。shrink-0
。