Firefox의 `overflow-y`가 중첩된 Flexbox와 일치하지 않는 이유는 무엇입니까?

Nested Flexbox에서 Firefox의 일관되지 않은 Overflow-y

CSS3으로 복잡한 레이아웃을 만들 때 Overflow-y 속성은 콘텐츠를 스크롤하는 데 중요할 수 있습니다. 특정 섹션 내에서. 그러나 중첩된 Flexbox 요소가 관련된 경우 Firefox에서 이 속성과 관련된 문제가 발생할 수 있습니다. 이로 인해 바람직하지 않은 스크롤 동작이 발생하거나 적절한 스크롤 막대가 없을 수 있습니다.

이 문제를 해결하려면 Flexbox 항목의 기본 동작과 최소 크기를 이해하는 것이 중요합니다. Flex 항목은 일반적으로 직계 하위 항목의 고유 크기를 기반으로 기본 최소 크기를 설정합니다. 이 동작은 숨겨진 오버플로에 대해 동일하게 유지됩니다.

따라서 오버플로: [hidden|scroll|auto]가 있는 요소가 플렉스 항목 내에 있는 경우 해당 상위 플렉스 항목에 min-width:0( 수평 플렉스 컨테이너의 경우) 또는 min-height:0(수직 플렉스 컨테이너의 경우). 이렇게 하면 자동 최소 크기 조정 동작이 효과적으로 비활성화되고 Flex 항목이 하위 항목의 최소 콘텐츠 크기 이상으로 축소될 수 있습니다.

.level-0-row2 규칙에서 이 조정을 구현하면 Overflow-y 동작을 수정할 수 있습니다. Firefox에서 적절한 스크롤 기능을 확인하세요. 이는 Firefox에만 적용되며 Chrome과 같은 다른 브라우저에서는 (처음에) 이 최소 크기 조정 동작을 생략했기 때문에 필요합니다.

최소 높이:0 조정이 포함된 수정된 코드 조각은 다음과 같습니다.

<code class="css">.level-0-row2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  min-height: 0;
}</code>

위 내용은 Firefox의 `overflow-y`가 중첩된 Flexbox와 일치하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!