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

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

Firefox와 Chrome 48에서 Flexbox 렌더링이 다르므로 문제가 발생합니다. 스크롤 내용. Chrome 47에서는 .scroll 클래스가 있는 요소가 올바르게 스크롤되고 컨테이너 높이의 100%를 차지합니다. 그러나 Firefox에서는 이러한 요소가 콘텐츠 높이를 준수하고 적절하게 스크롤되지 않습니다.

해결책

이러한 브라우저 간 문제는 Flexbox 사양 업데이트로 인해 발생합니다. 플렉스 아이템의 기본 최소 크기를 콘텐츠 크기(최소 너비: 자동 / 최소 높이: 자동)로 설정합니다. 이를 수정하려면 다음 CSS를 사용하여 이 설정을 재정의할 수 있습니다.

.content {
    min-height: 0;           /* NEW */
    min-width: 0;            /* NEW */
}

최소 높이와 최소 너비를 모두 0으로 설정하면 요소가 강제로 콘텐츠를 축소하여 다음을 수행할 수 있습니다. 컨테이너 내에서 올바르게 스크롤하세요.

최근 개발

Chrome이 48은 이후 Firefox의 렌더링 동작을 에뮬레이트하기 위해 렌더링 동작을 업데이트했습니다. 결과적으로 위에 제공된 솔루션은 이제 Firefox와 Chrome 48 모두에서 작동합니다.

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