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

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

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

이 문제를 해결하려면 flex: 1을 flex: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!