내 Flexbox 열 하위 항목이 Chrome의 높이를 100% 채우지 못하는 이유는 무엇입니까?

Flexbox 열 하위의 높이 100%

귀하의 문제는 Flexbox 사양의 충돌로 인해 발생하며, 이는 에서 높이 백분율이 계산되는 방식에 영향을 미칩니다. 크롬. flexbox 사양에 따르면 align-self가 스트레치(플렉스 요소의 기본값)로 설정되면 요소의 교차 크기 속성(이 경우 높이)에 사용되는 값이 조정됩니다. 그러나 백분율은 사용된 값이 아닌 상위의 교차 크기 속성에 지정된 값을 기반으로 작동합니다.

귀하의 예에서 .flex 요소의 CSS는 flex: 1로 설정되어 있습니다. 사용 가능한 공간을 모두 차지하게 됩니다. .flex-child 요소의 높이 설정은 100%입니다. 즉, Flex 부모의 지정된 높이를 기준으로 계산된 사용 가능한 높이의 100%를 차지한다는 의미입니다. 그러나 .flex의 높이는 명시적으로 설정되지 않으므로 기본값은 auto입니다. 결과적으로 Chrome은 .flex-child 높이를 auto의 100%로 해석하므로 전체 .flex 요소를 채우지 않습니다.

이 문제를 해결하려면 다음을 수행해야 합니다.

1. .flex를 표시하도록 설정: flex; 플렉스 컨테이너로 인식되도록 합니다.
2. 높이 제거: 100%; .flex-child의 명령문.

이렇게 하면 .flex-child가 상위 .flex 요소의 전체 높이를 채울 수 있습니다.

그러나 다음과 같은 경우 이 솔루션이 작동하지 않을 수 있습니다. .flex의 일부만 채우려고 합니다. 이러한 경우 flex: 1을 사용하여 .flex에 두 번째 .spacer 하위 항목을 추가하고 .flex-child를 flex: 9로 설정하는 것과 같은 해결 방법을 사용해야 합니다. 이는 덜 우아한 옵션이지만 해결하기 위한 해결 방법입니다. 사양 특성입니다.

이 문제는 Chrome에만 해당되며 다른 브라우저에서는 발생하지 않을 수도 있다는 점은 주목할 가치가 있습니다. Flexbox 사양에 대한 향후 업데이트를 통해 이러한 불일치가 해결되고 브라우저 간 호환성이 향상되기를 바랍니다.

위 내용은 내 Flexbox 열 하위 항목이 Chrome의 높이를 100% 채우지 못하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!