내 Flex Child가 Firefox에서는 상위 키를 초과하지만 Chrome에서는 초과하지 않는 이유는 무엇입니까?

하위 Flex 항목이 상위 높이를 초과하는 것을 방지

Flex 컨테이너에 flex: 1과 Overflow-y:가 모두 포함된 하위 항목이 포함된 경우: 스크롤하면 Chrome과 Firefox 간에 불일치가 발생합니다. Chrome에서는 하위 항목이 확장되어 상위 항목의 높이를 초과하지 않고 나머지 공간을 채우므로 스크롤 막대가 표시됩니다. 그러나 Firefox에서는 하위 항목의 높이가 증가하여 상위 항목을 벗어납니다.

해결 방법

Firefox에서 이 문제를 해결하려면 flex: 1을 flex:로 바꾸세요. 1 1 1px. 이는 고정된 최소 기준인 1px를 설정하여 콘텐츠 오버플로가 발생하더라도 하위 항목이 상위 항목의 높이를 초과하지 않도록 합니다.

수정된 코드

<code class="css">#messagelist {
  flex: 1 1 1px;
}

#messagecontents {
  flex: 1 1 1px;
}</code>

이렇게 수정하면 하위 항목이 Flex 컨테이너 내에 포함된 상태로 사용 가능한 공간을 채우기 위해 확장됩니다. 스크롤바는 Chrome과 Firefox 모두에 표시되어 사용자가 보이는 영역 너머의 콘텐츠를 볼 수 있습니다.

위 내용은 내 Flex Child가 Firefox에서는 상위 키를 초과하지만 Chrome에서는 초과하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!