유연한 폭에 상한을 두어 큰 화면에서도 읽기 좋은 영역을 만듭니다.
width:100%와 max-width를 함께 쓰면 작은 화면에서는 줄고 큰 화면에서는 지정한 상한을 넘지 않습니다. 긴 본문은 ch 단위로 줄 길이를 제한할 수도 있습니다.
이 예제는 .demo의 너비를 width: 100%와 max-width: 520px로 다시 정해, 좁은 창에서는 화면 폭에 맞춰 줄고 넓은 창에서는 520px에서 멈추게 합니다. 안쪽의 두 .target은 블록이라 부모 너비만큼 늘어나려 하지만 max-width: 32ch에 걸려 숫자 0 너비의 32배에서 멈추므로, 카드가 본문보다 좁게 왼쪽에 붙어 보입니다.
width: 100%와 max-width: 520px 두 줄은 width: min(520px, 100%) 한 줄로도 같은 결과를 냅니다. 또 min-width와 max-width가 서로 부딪히면 min-width가 이기므로, max-width를 아무리 작게 줘도 상자는 min-width보다 좁아지지 않습니다.
width만 고정하면 작은 화면에서 넘치고, max-width만 두면 원래 콘텐츠 폭에 따라 예상보다 작을 수 있습니다.
직접 바꿔보세요demo의 max-width를 320px과 700px로 비교하세요.