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

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

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

문제 설명:

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

해결 방법 :

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

<code class="css">.parent-flex-item {
  min-height: 0;
}</code>

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

코드 예:

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

<code class="html"><div class="parent-flex-item">
  <div class="nested-element">
    <p>This is a long text that exceeds the available height.</p>
  </div>
</div></code>

<code class="css">.parent-flex-item {
  display: flex;
  flex-direction: column;
  height: 100px;
  min-height: 0;
}

.nested-element {
  overflow-y: auto;
}</code>

이 코드를 사용하면 중첩된 요소에 Firefox의 스크롤바를 사용하면 사용자가 넘친 콘텐츠를 볼 수 있습니다.

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