내 Flexbox 스크롤 Div가 Firefox와 Chrome에서 다르게 렌더링되는 이유는 무엇이며 어떻게 해결할 수 있습니까?

Firefox 및 Chrome에서 Flexbox의 크로스 브라우저 렌더링 문제

Flexbox 레이아웃 모델은 요소 위치 지정 및 처리를 위한 직관적이고 효율적인 방법을 제공합니다. 사이징. 그러나 브라우저 간 렌더링 동작에 불일치가 발생할 수 있습니다.

문제: .Scroll Div의 부적절한 스크롤

이전 버전의 Chrome(47)에서는 . 스크롤 클래스는 플렉스를 사용하여 올바르게 스크롤되었으며 높이가 100%를 차지했습니다. 그러나 Firefox에서는 동일한 클래스로 인해 div가 콘텐츠 높이만 사용하게 되어 잘못된 스크롤 동작이 발생했습니다.

크로스 브라우저 솔루션

이 문제를 해결하려면 , 플렉스 항목의 기본 최소 크기를 재정의해야 합니다. min-width 및 min-height를 0으로 설정하면 .scroll div가 스크롤 막대를 유지하면서 콘텐츠에 맞게 축소될 수 있습니다.

.content {
    min-height: 0;
    min-width: 0;
}

Chrome 48에서 업데이트된 렌더링 동작

Chrome 48은 Firefox와 유사한 렌더링 동작을 채택했다는 점에 유의하는 것이 중요합니다. 결과적으로 위에 제공된 솔루션은 이제 두 브라우저 모두에서 일관되게 작동합니다.

추가 정보

Chrome 48의 변경 사항은 최신 Flexbox 사양에 맞춰 구현되었습니다. 기본적으로 최소 너비와 최소 높이는 자동으로 설정됩니다. 이를 통해 플렉스 항목에 대해 보다 합리적인 최소 크기를 허용합니다.

자세한 내용은 참조 답변에 링크된 사양 및 버그 보고서를 참조하세요.

위 내용은 내 Flexbox 스크롤 Div가 Firefox와 Chrome에서 다르게 렌더링되는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!