TailwindCSS - 요소의 드롭다운 메뉴가 사이드바의 다른 요소를 경계 밖으로 밀어내지 않도록 만드는 방법은 무엇입니까?
P粉505450505
P粉505450505 2023-09-03 19:21:03
0
1
472

기본적으로 여러 섹션(파란색)을 포함할 수 있는 사이드바가 있으며 각 섹션은 켜거나 끌 수 있고 여러 항목(빨간색)을 포함할 수 있습니다. 열 때 확장된 요소가 다른 파란색 부분을 테두리 밖으로 밀어내는 것이 아니라 테두리 밖으로 밀어내고 확장된 부분에서 오버플로 y 스크롤을 수행하기를 원합니다. 다음은 모양(1)과 모양(2)에 대한 스크린샷입니다.

사용된 코드는 다음과 같습니다.

<스타일> .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粉505450505
P粉505450505

모든 응답 (1)
P粉037215587

용기를 곡선으로 만들어 파란색 품목이 줄어드는 것을 방지할 수 있습니다.

  • 컨테이너 관련 클래스 추가:flex flex-col.
  • 파란색 품목의 경우:shrink-0.
으아악
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿
    회사 소개 부인 성명 Sitemap
    PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!