> 웹 프론트엔드 > CSS 튜토리얼 > Flex 항목이 상위 높이를 초과하지 않도록 방지하고 Firefox에서 스크롤 막대를 활성화하는 방법은 무엇입니까?

Flex 항목이 상위 높이를 초과하지 않도록 방지하고 Firefox에서 스크롤 막대를 활성화하는 방법은 무엇입니까?

DDD
풀어 주다: 2024-10-24 18:39:30
원래의
489명이 탐색했습니다.

How to Prevent Flex Item from Exceeding Parent Height and Enable Scrollbar in Firefox?

Flex 항목이 상위 높이를 초과하지 않도록 방지하고 Firefox에서 스크롤 막대를 활성화

Flex 컨테이너는 특히 하위 요소를 처리할 때 관리하기 까다로울 수 있습니다. 스크롤바가 있는 것입니다. Firefox에서 flex: 1 속성과 overflow-y: 스크롤이 있는 하위 div는 상위 flexbox 컨테이너의 높이를 초과하는 경향이 있습니다. 이 문제는 브라우저가 flex: 1 약어를 다르게 해석하기 때문에 발생합니다.

이 문제를 해결하려면 flex: 1flex: 1 1 1px. 이 조정된 값은 flex-basis(최소 너비 또는 높이)를 명시적으로 1px로 설정합니다. overflow-y: scroll과 함께 사용하면 하위 div가 상위의 높이 제한을 준수하고 필요한 경우 스크롤 막대를 표시하도록 합니다.

다음은 구체적인 코드 조정 사항입니다.

<code class="css">#messagelist {
  flex: 1 1 1px; /* new */
}

#messagecontents {
  flex: 1 1 1px; /* new */
}</code>
로그인 후 복사
이러한 변경 사항이 적용되면 하위 div가 확장되어 상위 컨테이너 내의 나머지 수직 공간을 채우지만 더 이상 상위 컨테이너의 높이를 초과하지 않습니다. 콘텐츠가 넘치면 스크롤 막대가 나타나 사용자가 하위 div가 무한정 커지지 않고 콘텐츠를 수직으로 스크롤할 수 있습니다.

위 내용은 Flex 항목이 상위 높이를 초과하지 않도록 방지하고 Firefox에서 스크롤 막대를 활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿