Width, Height, and Min/Max Dimensions

Width and height define a box’s desired size, while min/max constraints keep it usable as content and screen sizes change.

width and height set preferred dimensions. min-width and max-width impose limits on width, while min-height and max-height do the same for height. A fixed height can cause text overflow when content grows, so min-height often gives content more room.

For responsive cards, width: 100% combined with max-width is a common pattern. The element may be as wide as the container, but not wider than the cap.

Maximum constraints allow a component to shrink with its container while preventing it from becoming uncomfortably wide.

This card asks for a width of 240 CSS pixels.

HTML

<div class="tile">Compact card</div>

CSS

.tile { width: 240px; max-width: 100%; box-sizing: border-box; padding: 15px; background: #dbeafe; border-radius: 8px; }

Rendered output

Observe: The card has a predictable preferred width but does not extend past its available container.

Give the card room to expand naturally until a maximum.

HTML

<div class="tile">This card follows the available space.</div>

CSS

.tile { width: 100%; max-width: 420px; min-height: 70px; box-sizing: border-box; padding: 18px; background: #ccfbf1; border-radius: 8px; }

Rendered output

Observe: The card grows with its container up to 420px and has at least 70px of height.

Maximum constraints allow a component to shrink with its container while preventing it from becoming uncomfortably wide.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Using a fixed height for long text can cause accidental clipping or overflow.
• max-width: 100% is valuable when demonstrating fixed-width elements in narrower containers.

Set a smaller max-width and add a second sentence; observe how the text wraps and the height adapts.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Prefer fluid dimensions with sensible minimum and maximum values over rigid assumptions.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.