Firefox에서 'overflow-y'가 중첩된 Flexbox와 작동하지 않는 이유는 무엇입니까?

Firefox Overflow-y가 중첩된 Flexbox와 작동하지 않음

CSS3 Flexbox에서 Overflow-y를 적용하면 Firefox에서 문제가 발생합니다. 중첩된 플렉스 요소. 이렇게 하면 CodePen: http://codepen.io/anon/pen/NPYVga.

자세한 설명:

에서 볼 수 있듯이 flex 요소가 수직으로 스크롤되는 것을 방지할 수 있습니다. 기본적으로 플렉스 항목은 하위 항목의 고유 크기를 기반으로 최소 크기를 설정합니다. 오버플로: [hidden|scroll|auto] 요소가 플렉스 항목 내에 포함되어 있으면 플렉스 항목은 하위 항목의 최소 콘텐츠 크기보다 작게 축소되는 것을 지속적으로 거부합니다.

해결책:

이 문제를 해결하려면 min-height:0을 상위 플렉스 항목(제공된 코드의 .level-0-row2)에 할당하세요. 이렇게 하면 기본 최소 크기 조정 동작이 비활성화되어 Flex 항목이 필요에 따라 축소될 수 있습니다.

수정된 코드펜은 다음과 같습니다.

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;
}

참고:

Chrome은 현재 이 기본 최소 크기 조정 동작을 시행하지 않지만 특정 상황에서는 최소 크기를 0으로 잘못 축소할 수 있습니다.

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