CSS shrink-to-fit: 브라우저가 너비를 콘텐츠에 맞추는 방식

csslayout

Context

position: absolute + right: 320px인 컴포넌트 안의 Lottie 애니메이션이 가로로 찌그러지는 버그를 디버깅하다가 shrink-to-fit 개념을 제대로 이해하게 됐다.

What I Learned

블록 요소는 기본적으로 부모 너비를 가득 채우지만, 특정 상황에서는 브라우저가 반대로 너비를 콘텐츠에 맞춰 줄이는(shrink-to-fit) 방식으로 계산한다.

shrink-to-fit이 발동하는 조건:

  • position: absolute이면서 left/right 중 하나가 auto이고 width: auto인 경우
  • display: inline-block
  • float: left / right
  • flex 아이템 (일부 경우)

이때 너비 계산 공식:

width = min(max-content, max(min-content, available))
  • max-content: 줄바꿈 없이 한 줄로 폈을 때의 자연스러운 너비
  • min-content: 쪼갤 수 없는 가장 긴 단위(단어, 이미지 등)의 너비
  • available: 부모 너비에서 여백·positioning 제약을 뺀 가용 폭

실제 케이스에 대입:

컨테이너: 552px
right: 320px → available = 552 - 320 = 232px
max-content(자연 폭) ≈ 280px

→ width = min(280, max(min-content, 232)) = 232px

박스가 280px이고 싶은데 232px로 클램프 → 내부 flex 자식들이 flex-shrink: 1 기본값으로 비율 축소 → Lottie가 찌그러짐.

해결: min-width: max-content

min-width는 shrink-to-fit 결과에 하한선을 건다.

min-width: max-content; /* = 280px */

공식이 232를 뱉어도 최종 width는 max(232, 280) = 280이 되어 자연 폭 유지.

Note

transform은 레이아웃이 끝난 뒤의 시각 변환이라 shrink-to-fit을 막지 못한다. transform: scale(0.8)로 줄이고 싶다면, 레이아웃 단계에서 먼저 min-width로 너비를 고정해야 한다.

← All TIL