Firefox의 중첩 요소에 Flexbox Overflow-Y 문제

Flexbox를 사용하는 CSS 레이아웃에서 중첩 요소가 상위 Flexbox 내에 포함되어 있음 항목, Overflow-y가 Firefox에서 예상대로 작동하지 않을 수 있습니다. 이 문제는 중첩된 요소에 auto라는 Overflow-y 속성이 부여된 경우 특히 발생합니다.

문제 설명:

Flexbox 항목은 자동으로 고유 요소를 기반으로 최소 크기를 계산합니다. 하위 요소의 크기. 그러나 Overflow-y와 같이 오버플로 속성이 적용된 하위 요소가 있는 경우 Flex 항목은 사용 가능한 공간을 초과하더라도 하위 콘텐츠와 동일한 최소 크기를 유지합니다.

해결책 :

Firefox에서 이 문제를 해결하려면 상위 플렉스 항목의 최소 높이 속성을 명시적으로 0으로 설정해야 합니다. 이렇게 하면 기본 최소 크기 조정 동작이 비활성화되고 플렉스 항목이 축소될 수 있습니다. 자식의 최소 콘텐츠 크기보다 낮습니다.

.parent-flex-item {
  min-height: 0;
}

이 수정 사항을 적용하면 이제 Overflow-y: auto가 포함된 중첩 요소가 콘텐츠가 사용 가능한 높이를 초과할 때 축소되고 스크롤 막대를 표시할 수 있습니다.

코드 예 :

다음 HTML 및 CSS 코드를 고려하세요.

  

    
This is a long text that exceeds the available height.
  

.parent-flex-item {
  display: flex;
  flex-direction: column;
  height: 100px;
  min-height: 0;
}

.nested-element {
  overflow-y: auto;
}

이 코드를 사용하면 중첩된 요소에 Firefox의 스크롤 막대가 생겨 사용자가 오버플로된 콘텐츠를 볼 수 있습니다.