CSS Flexbox에서 자식 요소가 부모를 넘어가는 문제 — min-width 0

Question

CSS Flexbox에서 자식 요소가 부모를 넘어가는 문제 — min-width 0 관련 질문입니다.

CSS 레이아웃이 기대한 대로 동작하지 않습니다:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.child {
  width: 50%;
}

모바일에서 자식 요소가 넘쳐서 스크롤이 생깁니다. 반응형으로 처리하려면 어떻게 해야 할까요?

김영삼 · Accepted Answer

모바일에서 100vh는 주소창을 포함하므로 실제 뷰포트보다 큽니다. 또한 width: 50%가 모바일에서는 너무 좁을 수 있습니다..container { display: flex; justify-content: center; align-items: center; min-height: 100dvh; /* dvh = 동적 뷰포트 높이 */ padding: 20px; } .child { width: min(90%, 600px); /* 반응형: 최대 600px, 모바일은 90% */ } /* 또는 clamp 사용 */ .child { width: clamp(300px, 80%, 600px); }100dvh는 모바일 주소창 변화에 대응하고, min()/clamp()로 반응형 크기를 처리합니다.

이직준비중 · Answer

정확히 이 문제였습니다. 감사합니다!

댓글 2