CSS Sizing

Basic

Sizing answers a different question from the box model

The Box Model explains the edges around a box: content, padding, border, and margin. Sizing explains how a box gets its dimensions and how those dimensions are constrained. When a box is the wrong size, ask which problem you are solving: spacing around the box belongs to Box Model; choosing or constraining its size belongs here.

.box { padding: 1rem; border: 2px solid; }?.box { width: 20rem; padding: 1rem; border: 2px solid; }

Width and height express preferred sizes

The physical width and height properties specify preferred dimensions for a box. Their logical counterparts, inline-size and block-size, express the same kind of intent using the writing-mode axes. A physical width is not always the inline size: writing mode determines which physical dimension corresponds to each logical axis.

.box { width: 180px; }?.box { inline-size: 180px; }

Minimum and maximum constraints bound the result

width and height express preferred sizes, while min-width/min-height and max-width/max-height constrain the result. A useful debugging model is: start with the sizing request, then ask whether a minimum or maximum prevents that request from being used as-is. The exact final result still depends on the layout model.

.box { width: 80%; max-width: 260px; }?.box { width: 80%; max-width: 260px; }

Percentages depend on the containing block

For width and height sizing properties, percentages are generally resolved against the corresponding size of the containing block. That relationship is not a universal CSS rule for every percentage-valued property; Values & Units owns the general percentage value type, while Sizing explains how percentages participate in sizing.

.parent { width: 400px; }
.child { width: 50%; }?.parent { width: 400px; }
.child { width: 50%; }

auto means the layout model determines the size

auto does not mean one universal size. For width and height, auto asks the relevant layout algorithm to determine an automatic size. Normal flow, Flexbox, Grid, and other layout models can apply different rules. This lesson owns the common sizing terminology; each layout lesson owns its algorithm-specific auto behavior.

.item { width: auto; }?.item { width: auto; }

Intrinsic sizing lets content influence dimensions

Intrinsic sizes arise primarily from content. min-content represents the smallest size under a min-content constraint; max-content represents the ideal size when soft wrapping is avoided where possible. fit-content() limits a content-based size using a supplied argument and the intrinsic bounds. These keywords are sizing concepts, not ordinary length units.

.box { width: min-content; }?.box { width: min-content; }

box-sizing chooses the edge measured by a fixed size

box-sizing determines whether a specified sizing length or percentage applies to the content box or the border box. With content-box, padding and border are added outside the specified content size. With border-box, padding and border are included inside the specified border-box size, with the inner content size reduced accordingly and floored at zero.

.box { width: 180px; box-sizing: content-box; }?.box { width: 180px; box-sizing: border-box; }

Definite and indefinite sizes change what can be resolved

calc-size() can calculate from intrinsic size keywords

Current CSS Values work defines `calc-size()` for calculations based on intrinsic sizing keywords such as `auto` and `min-content`. It provides a way to perform size calculations and enables controlled interpolation where ordinary `calc()` cannot operate on an intrinsic size keyword. This is a developing feature, so treat it separately from the stable sizing core.

?

interpolate-size opts into interpolation with sizing keywords

The current CSS Values draft defines `interpolate-size: allow-keywords` to allow interpolation between a sizing keyword and a compatible length or percentage. Because this changes behavior that older style sheets may rely on, the property provides an explicit opt-in. The property is inherited, so a page-level opt-in can affect descendants.

?

Specification boundary: CSS Sizing owns the general sizing concepts and constraints; the current `calc-size()` and `interpolate-size` definitions live in the evolving CSS Values work. Do not present these features as equivalent in maturity to the established width/height, intrinsic-sizing, and constraint model.

A definite size can be determined without performing layout; an indefinite size cannot. This distinction matters when a percentage needs a containing-block size to resolve. When the relevant available space is indefinite, the layout algorithm may use automatic or content-based sizing instead. Do not treat every percentage as if it had an immediate pixel result.

.parent { height: auto; }
.child { height: 50%; }?.parent { height: 140px; }
.child { height: 50%; }

Aspect ratio can couple two dimensions

The aspect-ratio property gives a box a preferred width-to-height ratio that can influence sizing when one dimension is determined and the other is automatic. Sizing owns the general interaction between a preferred aspect ratio and size constraints; replaced-element natural dimensions and layout-specific algorithms may add their own rules.

.box { width: 240px; }?.box { width: 240px; aspect-ratio: 16 / 9; }

Size debugging starts with the requested size, constraints, and context

When a box is unexpectedly large or small, inspect three layers of reasoning: the sizing properties and values requested; min/max constraints and box-sizing; then the available space and layout model that determine automatic, percentage, or intrinsic sizing. Only after that should you inspect padding, border, and margin using the Box Model lesson.

.target { width: 80%; }?.target { width: 80%; min-width: 220px; max-width: 280px; box-sizing: border-box; }

Keep the ownership boundaries clear

Values & Units owns the general value types and units used by sizing. Box Model owns padding, borders, margins, and margin collapsing. Display owns box generation. Flow owns normal-flow participation. Flexbox and Grid own their layout-specific sizing algorithms. This lesson owns the general sizing properties, intrinsic and automatic sizing terminology, constraints, box-sizing, and cross-cutting sizing reasoning without duplicating those module-specific algorithms.

Quick review

You should now be able to distinguish preferred size from minimum and maximum constraints, explain how box-sizing selects the measured edge, recognize min-content and max-content as intrinsic sizes, explain why percentages need a reference size, and use definite versus indefinite size as a debugging concept. The next Phase 2 topic is Overflow, which will own clipping, scrollable overflow, and scrolling behavior rather than expanding this lesson into another layout system.