04 — Sizing (width · min/max · intrinsic · aspect-ratio)

.card { width: 100%; }
.card .url { /* 긴 영문 URL */ }
/* → URL이 줄바꿈 안 되면 .card의 min-content가 부모보다 큼
   → .card는 부모를 삐져나가거나 스크롤 발생 */

/* 기본 (W3C) */
.x { box-sizing: content-box; }  /* width = content만 */
.x { width: 200px; padding: 20px; border: 1px; }
/* 실제 차지 = 200 + 40 + 2 = 242px */
 
/* 모던 BP */
.x { box-sizing: border-box; }   /* width = content + padding + border */
.x { width: 200px; padding: 20px; border: 1px; }
/* 실제 차지 = 200px (content는 158px) */

1. width 또는 inline-size 명시되었나? → 그 값
2. 명시 없으면 → display에 따라 다름
   - block: stretch (부모 너비)
   - inline-block / flex / grid item: shrink-to-fit ≈ fit-content
3. min-width / max-width로 clamp
4. min-width의 기본값은 *auto*인데, 이게 *min-content와 비슷한* 행동을 한다 → 함정

.card {
  width: 100%;       /* 부모를 채워라 */
  min-width: 0;      /* ★ flex/grid 안에서 흔히 필요: 기본 min-width(=auto)가
                         min-content이라서 부모를 삐져나갈 수 있음 */
}

/* 2020년 이전 (해킹) */
.thumbnail {
  position: relative;
  padding-bottom: 56.25%;  /* 16:9 비율 */
  height: 0;
}
.thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
 
/* 2021년+ */
.thumbnail {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.thumbnail img { width: 100%; height: 100%; object-fit: cover; }

/* 옛날 */
.heading { font-size: 24px; min-font-size: 16px; max-font-size: 32px; }
/* → 위 문법 없음. media query로 분기 */
 
/* 모던 (CSS Values 4) */
.heading { font-size: clamp(1rem, 2.5vw, 2rem); }
/* clamp(min, preferred, max) */

.x { aspect-ratio: 1 / 1; }    /* 정사각 */
.x { aspect-ratio: 16 / 9; }   /* 비디오 */
.x { aspect-ratio: 4 / 3; }    /* 클래식 */
.x { aspect-ratio: 1.618; }    /* 황금비 (단일 숫자 = w/h) */
.x { aspect-ratio: auto 16/9; } /* 자연 비율 우선, 없으면 16/9 */

display: block
  ├─ width 명시? → 그 값 (min/max clamp)
  └─ 명시 없음? → stretch (부모 너비)

display: inline-block / flex-item / grid-item
  ├─ flex-basis 또는 grid 정의가 우선
  ├─ width 명시? → 그 값
  └─ 명시 없음? → fit-content (max-content 캡)

.flex-container { display: flex; }
.flex-item { flex: 1; overflow: hidden; }
/* → 안에 긴 텍스트가 있으면 flex-item이 줄어들지 않음
   원인: flex-item의 min-width 기본값이 auto = min-content */
 
.flex-item { min-width: 0; overflow: hidden; }  /* ★ 해결 */
/* 또는 flex shorthand: */
.flex-item { flex: 1 1 0; min-width: 0; }

.parent { width: 300px; }
.child { width: 100%; padding: 20px; box-sizing: content-box; }
/* → child = 300 + 40 = 340. 부모 삐져나감 */
 
/* 해결 1: */
.child { box-sizing: border-box; }  /* 100%가 padding 포함 */
 
/* 해결 2 (이미 border-box인데 내용이 큰 경우) */
.child { width: 100%; min-width: 0; overflow-wrap: anywhere; }

<div class="card">
  <p>https://verylongdomainwithoutanyspaces.example.com/path/to/something</p>
</div>

/* URL의 min-content가 카드보다 큼 */
.card { width: 300px; }   /* 부수어짐 */
 
/* 해결 */
.card p {
  overflow-wrap: anywhere;   /* 어느 글자든 줄바꿈 */
  /* 또는 */
  word-break: break-word;    /* 레거시 */
}

/* 2026년에는 즉시 교체 */
.thumb { padding-bottom: 56.25%; height: 0; }
/* → */
.thumb { aspect-ratio: 16/9; }

.hero { width: 100vw; }
/* → 100vw는 스크롤바 너비를 포함한다 (브라우저별 다름)
   → 본문이 스크롤 있는 경우 100vw > body width
   → 가로 스크롤 발생 */
 
/* 해결 */
.hero { width: 100%; }       /* 부모 너비 */
/* 또는 */
.hero { width: 100dvw; }     /* 동적 viewport (모바일 주소창 고려) */

.x { width: 200px; height: 100px; aspect-ratio: 16/9; }
/* → width와 height가 모두 명시되어 aspect-ratio 무시 */
 
/* 해결 */
.x { width: 200px; aspect-ratio: 16/9; }  /* height 자동 = 112.5px */

.x { width: 100%; margin: 1rem; }    /* width=100%, 결국 부모 폭 + 2rem 차지 */
.x { width: stretch; margin: 1rem; } /* 부모 폭 - 2rem 사용 (적절히 들어맞음) */