부모의 높이가 명시적으로 정의되지 않은 경우 `max-height: 100%`가 있는 하위 요소가 상위 요소를 오버플로하는 이유는 무엇입니까?

최대 높이가 100%인 하위 요소가 상위 높이를 초과함

예상치 못한 상황에서 최대 높이가 100%인 하위 요소가 발생했습니다. 컨테이너에 최대 높이가 있음에도 불구하고 컨테이너가 오버플로됩니다. 이러한 불일치는 컨테이너 높이가 명시적으로 정의되지 않은 경우 발생합니다.

설명 자세히 살펴보기

하위 요소의 max-height를 백분율로 지정할 때 이는 다음을 나타냅니다. 최대 높이가 아닌 부모의 실제 높이입니다. 명시적인 컨테이너 높이가 없으면 이 백분율 계산은 아무것도 산출하지 않으므로 사실상 하위 항목이 무한정 커질 수 있습니다.

하위 항목에 남아 있는 유일한 제약은 상위 항목의 최대 너비입니다. 이미지의 너비가 너비보다 높기 때문에 크기를 최대화하면서 가로 세로 비율을 유지하기 위해 컨테이너의 높이를 오버플로합니다.

명시적 상위 높이로 해결

부모의 높이가 명시적으로 정의되어 있으면 자식의 최대 높이는 지정된 값의 100%로 올바르게 제한됩니다. 이렇게 하면 자식이 컨테이너 높이 내에 유지되면서도 가로세로 비율을 유지할 수 있습니다. 따라서 max-height: 100%를 사용할 때 자식이 부모 높이를 넘치지 않도록 하려면 명시적인 부모 높이를 설정해야 합니다.

위 내용은 부모의 높이가 명시적으로 정의되지 않은 경우 `max-height: 100%`가 있는 하위 요소가 상위 요소를 오버플로하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!