## 'flex: 1'이 포함된 Flex 항목이 Firefox에서는 상위 높이를 초과하지만 Chrome에서는 초과하지 않는 이유는 무엇입니까?

Flex 항목의 부모 높이 및 스크롤 막대 기능을 초과하지 않도록 방지

Firefox에서는 flex: 1 및 오버플로가 있는 하위 flexbox 항목이 관찰됩니다. y: 스크롤이 상위 Flexbox의 높이를 초과하여 콘텐츠가 넘치고 스크롤 막대가 나타나지 않을 수 있습니다. 반대로 Chrome에서는 하위 항목이 나머지 수직 공간을 올바르게 채우고 스크롤 막대가 나타나며 상위 높이가 초과되지 않습니다.

해결 방법

이 문제를 해결하려면 flex: 1을 flex로 바꾸세요. : 하위 Flexbox 항목의 경우 1 1 1px입니다. 이는 flex-basis를 고정 값 1px로 설정하여 스크롤 오버플로가 발생하고 스크롤 막대가 표시되도록 합니다.

설명

이러한 경우 min-height: 0을 설정하는 일반적인 관례에도 불구하고 , 이 시나리오에서는 충분하지 않습니다. 단축 규칙 flex: 1에는 flex-basis: 0이 포함되어 있으며 Firefox 및 Edge에서는 오버플로를 트리거하기에 충분하지 않습니다.

MDN에 따르면:

오버플로가 효과를 가지려면, 블록 수준 컨테이너에는 설정된 높이(높이 또는 최대 높이) 또는 현재 랩으로 설정된 공백이 있어야 합니다.

표준화된 동작을 보장하고 오버플로를 활성화하려면 flex-basis에 대해 고정 높이를 설정하세요. 1px 정도의 최소값입니다.

위 내용은 ## 'flex: 1'이 포함된 Flex 항목이 Firefox에서는 상위 높이를 초과하지만 Chrome에서는 초과하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!