둘 다 '최대 높이: 100%'임에도 불구하고 내 하위 요소가 상위 요소를 오버플로하는 이유는 무엇입니까?

최대 높이가 100%임에도 불구하고 상위 항목이 넘치는 하위 요소

컨테이너 내부에 최대 높이가 100%인 하위 요소가 있는 상황을 생각해 보세요. 최대 높이를 활용합니다. 예기치 않게 하위 요소가 상위 요소를 오버플로하게 됩니다.

동작 이해

문제는 자식의 경우 최대 높이가 아닌 부모 실제 높이의 백분율을 나타냅니다. 따라서 상위 요소에 명시적인 높이가 설정되지 않은 경우 하위 요소의 최대 높이 계산에 대해 정의된 기본 높이가 없습니다. 결과적으로, max-height의 기본값은 "none"이므로 하위 요소가 무한정 커질 수 있습니다.

이 경우 하위 요소에 대한 유일한 제한은 상위 요소의 최대 너비입니다. 이미지의 너비가 너비보다 높기 때문에 전체 크기를 최대화하면서 가로 세로 비율을 유지하기 위해 아래쪽 방향으로 컨테이너 높이를 오버플로합니다.

해결 방법: 명시적 높이

이 문제를 해결하려면 상위 요소에 명시적인 높이를 제공하기만 하면 됩니다. 이렇게 하면 하위 요소의 최대 높이 계산을 위한 명확한 기본 높이가 설정됩니다. 결과적으로 하위 요소는 가로 세로 비율을 유지하면서 상위 요소의 높이로 제한됩니다.

따라서 상위 요소에 대해 명시적인 높이를 지정하면 하위 요소가 최대 높이 제한을 준수하여 방지할 수 있습니다. 용기가 넘치지 않게 해주세요.

위 내용은 둘 다 '최대 높이: 100%'임에도 불구하고 내 하위 요소가 상위 요소를 오버플로하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!