중첩된 Flexbox 레이아웃이 있는 Firefox에서 Overflow-y가 예상대로 작동하지 않는 이유는 무엇입니까?

중첩 Flexbox 레이아웃의 Firefox Overflow-Y 문제

중첩 Flexbox로 설계된 너비 100% 및 높이 100% 레이아웃에서 예상치 못한 문제가 발생했습니다. Firefox에서 Overflow-y가 올바르게 작동하지 않는 동작이 발생합니다.

질문:

왜 Overflow-y가 제공된 CSS 코드에서 예상대로 작동하지 않고, 이로 인해 Firefox에서 잘못된 스크롤 막대를 표시합니까?

답변:

이 문제는 Flex 항목의 기본 최소 크기 동작으로 인해 발생합니다. Flex 항목은 하위 항목에 적용된 Overflow-y를 무시하고 하위 항목의 고유 크기를 기준으로 최소 크기를 파생합니다.

overflow-y: [hidden|scroll|auto]가 있는 요소가 Flex 항목 내에 배치되면, 해당 상위 flex 항목에 min-width:0(수평 flex 컨테이너의 경우) 또는 min-height:0(수직 flex 컨테이너의 경우)을 설정해야 합니다. 이렇게 하면 기본 최소 크기 조정 동작이 비활성화되어 플렉스 항목이 하위 항목의 최소 콘텐츠 크기 아래로 줄어들 수 있습니다.

문제를 해결하려면 min-height:0을 .level-0-row2 규칙에 추가하세요. 다음 업데이트된 CSS 코드에서 볼 수 있듯이:

<code class="css">.level-0-row2 {
  ...
  min-height: 0;
  flex: 1;
  border: 1px solid black;
  ...
}</code>

이렇게 하면 .level-0-row2 플렉스 항목이 하위 항목의 Overflow-y를 고려하고 최소 콘텐츠 크기 아래로 줄어들 수 있으므로 적절한 사용이 가능해집니다. Firefox의 오버플로 동작.

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