🧩 현상 요약

컴포넌트가 렌더링되었는데 내용이 잘리거나 일부만 보임.

<div className="spacer" />를 추가했더니 정상적으로 모두 보임.

📌 원인: 부모 레이아웃이 자식 콘텐츠 높이를 제대로 계산하지 않음

예를 들어…

<div className="outer">
  <ChildComponent />
</div>

.outer {
  display: flex;
  flex-direction: column;
  height: 100%; // ← 부모가 height 제한
}

.child {
  overflow: hidden;
  position: absolute;
  top: 0;
}

• ChildComponent 안의 요소가 absolute, overflow: hidden 등으로 자체적으로는 높이를 차지하지 않음
• 그러면 .outer 입장에선 "내 자식은 없는 셈" → 높이 계산이 0
• 그래서 아래 콘텐츠가 짤리거나, 안 보임

✅ 해결 방법: 보이지 않아도 되는 <div /> 하나로 공간 확보

<div className="outer">
  <ChildComponent />
  <div className="spacer" />
</div>

.spacer {
  min-height: 1px;
  display: block;
  visibility: hidden;
}

• spacer는 브라우저 입장에서는 **"실제 콘텐츠가 존재한다"**고 인식하게 해 줌
• 따라서 .outer는 자식이 있다 → 공간 확보해야 한다 → 콘텐츠 잘리지 않음

✅ 마무리 요약

CSS는 '화면에 보여야 한다'가 아니라 '공간을 차지해야 한다'는 규칙으로 레이아웃을 계산합니다.

눈에 보여도 공간을 차지하지 않으면, 브라우저는 그 부분을 잘라냅니다.

<div /> 하나라도 넣으면 공간을 확보하게 되어 모든 콘텐츠가 보이게 되는 것입니다.