Chrome의 Flexbox 열 하위 항목에서 'height: 100%'가 작동하지 않는 이유는 무엇입니까?

Flexbox 열 하위 항목의 높이 100%가 작동하지 않음: Chrome 문제

Flexbox에서는 하위 요소가 사용 가능한 높이를 채워야 합니다. height:100% 속성에 지정된 대로입니다. 그러나 상위 요소가 Flexbox 열인 경우 Chrome에서는 이 동작이 중단됩니다.

제공된 예에서 다음 코드는 Flexbox 열 레이아웃을 만드는 것을 목표로 합니다.

.flexbox {
  display: flex;
  flex-direction: column;
  height: 100%;
}

그리고 하위 요소는 사용 가능한 높이를 채우도록 설정됩니다.

.flex-child {
  height: 100%;
}

그러나 Chrome에서는 하위 요소가 height:100% 속성, 정의되지 않은 높이로 둡니다.

해결책:

다음을 수정하여 문제를 해결할 수 있습니다.

1. 표시할 상위 요소 .flex를 flex로 설정합니다. 이는 브라우저에 Flexbox 레이아웃을 사용하도록 명시적으로 지시하는 중요한 단계입니다.
2. 하위 요소 .flex-child에서 height: 100% 속성을 제거하세요. 이는 브라우저가 지정되지 않은 상위 ​​높이에 백분율 값을 적용하려고 시도하여 발생하는 혼란을 제거합니다.

설명:

Flexbox는 사양을 문자 그대로 따릅니다. . 유연한 요소의 기본값인 align-self: Stretch 값은 "지정된" 값이 아니라 교차 크기 속성(이 경우 높이)의 "사용된" 값만 수정합니다. 반면에 백분율은 상위의 교차 크기 속성에 지정된 값을 기반으로 계산됩니다.

.flex에는 지정된 높이가 없으므로 .flex에서 height: 100%를 설정하려고 합니다. child는 .flex의 지정되지 않은 높이를 100% 생성하며 이는 기본적으로 "자동"입니다. 이로 인해 브라우저가 의도를 잘못 해석하게 됩니다.

.flex를 display: flex로 설정하여 브라우저가 Flexbox 레이아웃을 사용하도록 하여 요소가 올바르게 배치되도록 합니다. 또한 .flex-child의 height: 100% 속성을 제거하면 요소가 상위 요소인 .flex의 지정된 높이를 상속할 수 있습니다.

제한 사항:

이 솔루션은 .flex의 전체 공간을 채우는 데 작동하지만 .flex의 일부만 채우려는 경우에는 작동하지 않을 수 있습니다. 이러한 경우 절대 위치 지정이나 여러 Flexbox 하위 항목을 사용하는 해결 방법이 필요할 수 있습니다.

위 내용은 Chrome의 Flexbox 열 하위 항목에서 'height: 100%'가 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!