[Fix] overflow-x:hidden 부여 시, 세로 영역까지 잘리는 이슈

[GiToon10100011]

버그 설명

overflow-x: hidden만 줬는데, 세로 영역까지 요소가 잘리게 됨.

발생 원인

overflow hidden 속성값의 브라우저 레이아웃 계산 결과에 영향을 미치기 때문에 발생하게 된 문제.

hidden

• 자식 요소가 컨테이너 밖으로 넘치면, 브라우저가 보이지 않도록 클리핑 처리함.
• 일부 브라우저에서는 포인터 이벤트(hit testing) 도 차단할 수 있음.
• 브라우저는 해당 요소를 레이아웃 계산에서 제외하고, scroll 영역 계산, absolute 기준점 등의 처리에 직접적인 제약을 가함.
• 예를 들어, overflow: hidden을 가진 부모 요소 안에 position: absolute 자식 요소가 있을 경우, 자식이 의도치 않게 잘리거나 보이지 않을 수 있음.

예상 결과

멀쩡하게 Label은 잘 보이고, password input은 숨겨졌어야함

해결책

overflow-x: clip을 사용하니까 해결됨.

clip

• 자식이 컨테이너 밖으로 튀어나가도 그냥 시각적으로 자름만 할 뿐
• 내부적으로는 그 요소가 "존재"하고 있음.
• 자식 요소가 컨테이너를 넘쳐도 단순히 시각적으로만 잘림.
• 브라우저는 해당 요소가 존재함을 인지하고, scroll box나 레이아웃 기준 계산에는 거의 영향을 주지 않음.
• absolute 요소의 위치나 크기 판단에도 제약이 거의 없어, 부모의 clip 속성이 레이아웃을 방해하지 않음.

즉, overflow: hidden은 넘친 콘텐츠를 보이지 않게 하며 레이아웃까지 제어하지만, overflow: clip은 콘텐츠를 시각적으로만 잘라내며, 레이아웃에는 거의 영향 주지 않는다.

그래서 다음과 같이 용도에따라 hidden과 clip을 사용하면 좋을 것 같습니다.

• hidden:
  → 진짜 레이아웃에서 컨텐츠를 없앤 셈 치고 싶을 때
  → 예: 슬라이딩 메뉴, 모달, 애니메이션 등에서 정확히 잘라야 할 때

• clip:
  → 콘텐츠는 존재하게 두되, 그냥 화면에서만 안 보이게 하고 싶을 때
  → 예: label/input 깨지는 거 방지, 레이아웃 영향 없이 시각만 제어할 때

참고할만한 자료(선택)

https://stackoverflow.com/questions/10436452/overflow-x-hidden-also-hides-vertical-content-too