보통은 부모 요소에 flex 속성을 주면 해결된다.
1. 부모 요소의 높이가 정의되지 않은 경우
height: 100%는 부모 요소의 높이에 따라 상대적으로 결정된다. 만약 부모 요소의 높이가 명시적으로 지정되지 않았다면, 자식 요소가 참조할 높이가 없기 때문에 올바르게 계산되지 않는다. 이로 인해 자식 요소가 상위 요소의 높이를 넘어설 수 있다.
해결 방법: 부모 요소에 명시적으로 height를 설정해 준다. 예를 들어, 부모 요소에 height: 100vh 또는 고정된 값을 지정하면 자식 요소의 height: 100%가 제대로 적용된다.
2. 상위 요소의 padding이나 border 문제
부모 요소에 padding이나 border가 있을 경우, 자식 요소의 높이가 100%일 때 padding이나 border가 더해져서 실제 높이가 더 커질 수 있다.
해결 방법: 부모 요소의 box-sizing을 border-box로 설정하여 padding이나 border를 높이 계산에 포함하도록 하면 도움이 된다.
.parent {
box-sizing: border-box;
}3. 부모 요소가 플렉스 컨테이너인 경우
부모 요소가 display: flex로 설정되어 있을 경우, 자식 요소의 높이를 100%로 설정할 때 부모 요소의 높이를 넘어서 높이가 제대로 조정되지 않는 경우가 있다.
플렉스 레이아웃에서는 부모 요소의 align-items 속성이나 자식 요소의 flex-grow와 같은 플렉스 관련 속성을 조정해주는 것이 필요할 수 있다.
.parent {
display: flex;
align-items: flex-start; /* 자식 요소가 부모 높이에 맞춰 늘어나지 않도록 설정 */
}
.child {
flex-grow: 0; /* 자식 요소가 남는 공간을 차지하지 않도록 설정 */
}4. 스크롤 및 오버플로우 문제
부모 요소가 특정 높이를 가지고 있고 overflow가 visible로 설정되어 있는 경우, 자식 요소가 height: 100% 이상으로 커지면 부모 요소를 넘어서게 된다.
해결 방법: 부모 요소의 overflow 속성을 hidden, auto, 또는 scroll로 설정하여 자식 요소가 부모의 영역을 넘어서지 않도록 한다.
.parent {
overflow: hidden; /* 자식 요소가 부모의 높이를 넘지 않도록 설정 */
}