Firefox 및 Chrome 48에서 내 Flexbox 요소가 일관되지 않게 렌더링되는 이유는 무엇입니까?

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

백그라운드

A Flexbox 사양에 대한 최근 업데이트에서는 콘텐츠 크기와 일치하도록 Flex 항목의 기본 최소 크기가 변경되었습니다. Chrome 47에서는 이 변경 사항을 올바르게 구현했지만 Chrome 48 및 Firefox에서는 Flexbox 요소 렌더링에 문제가 있었습니다.

문제

Firefox에서 특정 Flexbox 요소에 콘텐츠가 넘쳤습니다. 예상치 못한 행동을 하게 됩니다. Chrome 47은 이러한 요소를 올바르게 렌더링했지만 이제 Chrome 48은 Firefox의 동작과 일치합니다.

해결책

이 문제를 해결하려면 이러한 요소의 기본 최소 크기를 명시적으로 재정의할 수 있습니다. 다음 CSS 속성을 사용합니다.

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

이렇게 하면 Flexbox 요소가 내용에 맞게 올바르게 축소되어 렌더링 문제가 해결됩니다.

사양 세부 정보

Flexbox 사양에는 다음과 같이 명시되어 있습니다.

"flex 항목에 대한 보다 합리적인 기본 최소 크기를 제공하기 위해 이 사양에서는 min-width 및 min-height 속성의 초기 값으로 새로운 자동 값을 도입합니다. CSS 2.1에 정의되어 있습니다."

Chrome 48에 미치는 영향

관찰에 따르면 Chrome 48에서 Flexbox 업데이트의 초기 구현은 Firefox의 동작을 에뮬레이트하여 유사한 렌더링 문제를 일으켰습니다. . 그러나 후속 보고서에 따르면 Chrome 48은 위에 제공된 솔루션과 일치하도록 렌더링 동작을 업데이트했습니다.

결론

Flex 항목의 최소 크기를 명시적으로 0으로 설정 양방향으로 오버플로된 콘텐츠를 처리할 때 Firefox 및 Chrome 48에서 발생하는 렌더링 문제를 효과적으로 해결할 수 있습니다.

위 내용은 Firefox 및 Chrome 48에서 내 Flexbox 요소가 일관되지 않게 렌더링되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!