Firefox의 스크롤 막대를 사용하여 Flex 하위 항목이 상위 높이를 초과하는 것을 방지하는 방법은 무엇입니까?

Flex 항목이 스크롤 막대를 사용하여 상위 높이를 초과하지 않도록 방지

문제: Firefox에서 스크롤 막대가 있는 flex 하위 항목 상위 Flex 컨테이너의 높이를 초과하여 콘텐츠 오버플로가 발생하고 스크롤 막대가 없습니다.

해결책:

하위 항목 #messagelist 및 #의 flex 속성을 수정합니다. 메시지 내용은 다음과 같습니다.

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

#messagecontents {
        flex: 1 1 1px; /* instead of flex: 1 */
    }</code>

설명:

Chrome의 기본 동작은 flex-basis가 0으로 설정된 경우 오버플로를 유발하고 스크롤 막대를 생성하는 것입니다. Firefox 및 Edge 그러나 오버플로가 발생하려면 설정된 높이 또는 최대 높이가 필요합니다.

flex-basis에 고정 높이를 1px로 지정하면 작은 값이라도 오버플로 생성 요구 사항을 충족합니다. 조건을 충족하고 콘텐츠가 어린이의 키를 초과할 때 스크롤바가 표시되도록 합니다.

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