내 Flexbox 레이아웃이 Firefox 33.x와 34.x 사이에서 변경되는 이유는 무엇입니까?

FF 34.x Flexbox와 FF 33.x 동작의 불일치

Firefox 34.x 또는 35.x 사용자는 예기치 않은 Flexbox를 관찰했습니다. Firefox 33.1과 비교한 동작입니다. 이러한 불일치는 Flexbox 사양에 도입된 변경 사항, 주로 "플렉스 항목의 암시적 최소 크기" 추가로 인해 발생합니다.

문제 해결

동작을 복원하려면 Firefox 34.x의 Firefox 33.x에서 가장 간단한 해결책은 다음 CSS 스타일을 적용하는 것입니다. 규칙:

• { min-height:0 }

이것은 "묵시적 최소 크기"를 재정의하고 레이아웃이 뷰포트 이상으로 커지는 것을 방지합니다.

특정 사용 사례

원래 시나리오에서는 레이아웃 문제 "열" 지향 플렉스 컨테이너 내의 특정 요소 조합으로 인해 발생했습니다. 올바른 동작을 보장하려면 다음 기준을 충족해야 합니다.

• 다음과 같은 각 하위 요소에 min-height:0을 추가합니다.

  • "열" 지향 플렉스 컨테이너
  • Overflow

원래 시나리오와 같이 중첩된 플렉스 컨테이너가 여러 개 있는 경우 모든 중첩 요소에 min-height:0을 적용해야 할 수 있습니다.

위 내용은 내 Flexbox 레이아웃이 Firefox 33.x와 34.x 사이에서 변경되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!