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

Question

김영삼 · 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

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

댓글 0