min-content와 max-content track은 긴 텍스트의 줄바꿈과 폭을 어떻게 다르게 만드나요?

min-content는 허용된 줄바꿈을 최대한 적용했을 때의 최소 intrinsic 폭이고, max-content는 줄바꿈하지 않고 한 줄에 놓는 선호 폭입니다. 세 단어의 측정 폭이 80·120·60px이고 공백에서 줄바꿈할 수 있다고 가정하면 설명용으로 max-content는 공백을 포함한 약 280px, min-content는 가장 긴 단어인 약 120px입니다. grid-template-columns:min-content 1fr에서는 첫 track이 약 120px로 접히고 둘째 track이 남은 공간을 받지만, max-content 1fr에서는 첫 열이 280px을 요구해 옆 열을 압박합니다.

이 숫자는 글꼴과 실제 분할 규칙을 고정한 산술이지 모든 브라우저의 측정값이 아닙니다. 공백 없는 URL이나 긴 코드 토큰은 min-content도 커질 수 있고, overflow-wrap:anywhere는 가능한 break point 자체를 늘립니다. 또한 width:min-content는 item의 used width를 정하는 선언이고, grid-template-columns:min-content는 track의 sizing function입니다. DevTools에서 track width만 보지 말고 줄 수, scrollWidth, white-space, wrap 규칙을 함께 확인해야 합니다.

실무에서 min-content의 하한은 콘텐츠에 줄바꿈 기회가 있다는 전제에서만 작동합니다. 예를 들어 하이픈이 없는 500px 토큰 하나가 있으면 다른 단어가 120px이어도 min-content는 500px 쪽으로 올라갑니다. 반대로 overflow-wrap:anywhere를 적용하면 가능한 break point가 늘어 intrinsic 계산과 실제 행 높이가 함께 달라집니다. 그러므로 track 함수만 바꾼 뒤 “줄바꿈이 해결됐다”고 판정하지 말고, 동일한 font와 writing mode에서 line count와 scrollWidth를 비교해야 합니다.