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

Firefox 및 Chrome 48에서 Flexbox의 렌더링 문제 해결

소개:
Flexbox, 강력한 레이아웃 시스템으로 인해 브라우저 간 불일치가 발생할 수 있습니다. 이 질문은 Firefox와 Chrome 48에서 Flexbox가 다르게 동작하는 렌더링 문제를 다룹니다.

문제:
Chrome 47에서 .scroll 클래스가 있는 div가 제대로 스크롤되어 100%를 차지합니다. 플렉스를 이용한 높이 그러나 Firefox에서는 동일한 div가 콘텐츠 높이를 사용하고 올바르게 스크롤되지 않습니다.

해결 방법:
Flexbox 사양 업데이트로 인해 렌더링 동작이 변경되었습니다. , 플렉스 항목의 기본 최소 크기를 콘텐츠 크기로 설정합니다. 이 설정을 재정의하고 브라우저 간 호환성을 보장하려면 다음 CSS 규칙을 추가하면 됩니다.

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

이렇게 하면 .scroll div가 포함된 .content div의 최소 크기가 0이 됩니다. , 사용 가능한 공간에 맞게 축소할 수 있습니다.

업데이트된 Chrome 동작:
처음에는 위의 솔루션은 Firefox와 Chrome 48 모두에서 작동할 것으로 예상되었습니다. 그러나 Chrome 48이 렌더링 동작을 업데이트했으며 이제 최소 플렉스 크기 측면에서 Firefox를 에뮬레이트한다고 보고되었습니다. 따라서 위에 제공된 해결 방법은 Chrome 48의 문제도 해결해야 합니다.

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