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-전체 테두리 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-전체 테두리 border-black bg-blue-500"></div>
<div class="h-20 w-전체 테두리 border-black bg-blue-500"></div>
</div>
<스타일>
.h-96{
높이: 24rem;
}
.w-52{
폭: 13rem;
}
.오버플로 숨김{
오버플로: 숨김;
}
.bg-블랙{
배경색: rgb(0 0 0);
}
.w-전체{
너비:100%;
}
.국경{
테두리 너비: 1px;
}
.border-black{
테두리 색상: rgb(0 0 0);
}
.bg-블루-500{
배경색: rgb(59 130 246);
}
.h-fit{
높이: 적합 콘텐츠;
}
.space-y-1{
여백 상단: 0.25rem;
}
.overflow-y-scroll{overflow-y: 스크롤;}
.h-10{높이: 2.5rem;}
.bg-red-500{배경색: rgb(239 68 68);}
.h-20{높이: 5rem;}
.h-[100px]{
높이:100px;
}
</p>
<p>제공하실 수 있는 도움에 미리 감사드립니다! </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
용기를 곡선으로 만들어 파란색 품목이 줄어드는 것을 방지할 수 있습니다.
- 컨테이너 관련 클래스 추가:
- 파란색 품목의 경우:
으아악flex flex-col.shrink-0.