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

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

Firefox는 특정 Flexbox와 관련하여 Chrome과 다르게 동작합니다. 시나리오에서는 하위 div의 높이가 상위 div의 높이를 초과하게 됩니다. 이 문제는 스크롤 막대와 flex:1이 있는 하위 div가 상위 flexbox 컨테이너의 높이를 초과하려고 할 때 발생합니다.

짧은 답변

이 문제를 해결하려면, Overflow-y: 스크롤이 있는 하위 div의 경우 flex: 1 대신 flex: 1 1 1px를 사용하세요. CSS 규칙의 이러한 변경으로 하위 div의 플렉스 기준이 고정 높이로 설정되어 Firefox의 문제가 해결됩니다.

설명

대부분 min을 추가합니다. -height: 0으로 열 방향 컨테이너의 항목을 조정하면 문제가 해결됩니다. 그러나 이 경우 문제는 flex-basis에 있습니다.

flex: 1 약식 규칙은 flex-grow: 1, flex-shrink: 1, flex-basis: 0의 세 부분으로 나뉩니다. . 기본적으로 flex-basis는 0으로 설정되어 있으며 이는 Firefox 및 Edge 브라우저에서 오버플로 조건을 트리거하기에 충분하지 않습니다.

표준화를 준수하려면 flex-basis에 고정 높이를 지정하세요(단순한 경우에도). 1px). 이렇게 하면 오버플로가 발생하여 스크롤 막대가 생성되고 하위 div가 상위 div의 높이를 초과하는 것을 방지할 수 있습니다.

코드 조정 사항은 다음과 같습니다.

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

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

이 솔루션을 채택하면 문제를 극복하는 데 도움이 됩니다. Firefox에서 상위 및 하위 Flexbox div 간의 높이 불일치를 방지하여 브라우저 전반에서 일관된 동작을 보장합니다.

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