상위 요소에 'max-height'가 있을 때 하위 요소가 'max-height: 100%'로 오버플로되는 이유는 무엇입니까?

최대 높이가 100%인 예기치 않은 오버플로 문제

주어진 예에서 최대 높이가 100%인 하위 요소 지정된 최대 높이로 상위 컨테이너를 오버플로합니다. 이 예상치 못한 동작은 이러한 시나리오에서 max-height의 특성에 대한 의문을 제기합니다.

문제의 핵심은 하위 요소의 max-height 계산에 있습니다. max-height가 백분율로 설정되면 최대 높이가 아닌 부모의 실제 높이에 대한 백분율로 해석됩니다. 부모에 대해 명시적인 높이가 지정되지 않은 경우 부모의 실제 높이는 정의되지 않으므로 자식의 최대 높이는 기본적으로 없음으로 설정됩니다.

자식에게 최대 높이가 적용되지 않으면 자유롭게 다음을 수행할 수 있습니다. 콘텐츠의 전체 범위까지 성장합니다. 일반적으로 가로 종횡비보다 세로 종횡비가 큰 이미지의 경우, 이미지는 고유한 종횡비를 유지하면서 컨테이너의 높이를 아래쪽으로 오버플로합니다.

이 예상치 못한 동작에 대한 해결책은 명시적으로 다음과 같습니다. 상위 요소의 높이를 정의합니다. 이렇게 하면 어린이의 최대 높이 계산을 위한 고정 높이 기준점이 설정됩니다. 이렇게 하면 하위 항목의 가로 세로 비율을 유지하면서 지정된 높이 제한 내에서 오버플로를 방지할 수 있습니다.

위 내용은 상위 요소에 'max-height'가 있을 때 하위 요소가 'max-height: 100%'로 오버플로되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!