CSS Box Sizing Module Level 4

CSS Box Sizing Module Level 4

Editor’s Draft,

More details about this document

Copyright © 2026 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.

Abstract

This module extends the CSS sizing properties with keywords that represent content-based "intrinsic" sizes and context-based "extrinsic" sizes, allowing CSS to more easily describe boxes that fit their content or fit into a particular layout context. This is a delta spec over CSS Sizing Level 3.

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc.

Status of this document

This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress.

Please send feedback by filing issues in GitHub (preferred), including the spec code “css-sizing” in the title, like this: “[css-sizing] …summary of comment…”. All issues and comments are archived. Alternately, feedback can be sent to the (archived) public mailing list www-style@w3.org.

This document is governed by the 18 August 2025 W3C Process Document.

1. Introduction

This is a diff spec over CSS Sizing Level 3. It is currently an Exploratory Working Draft: if you are implementing anything, please use Level 3 as a reference. We will merge the Level 3 text into this draft once it reaches CR.

Tests

General sizing tests

1.1. Module interactions

This module extends the width, height, min-width, min-height, max-width, max-height, and column-width features defined in [CSS2] chapter 10 and in [CSS3COL]

1.2. Value Definitions

This specification follows the CSS property definition conventions from [CSS2] using the value definition syntax from [CSS-VALUES-3]. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Combination with other CSS modules may expand the definitions of these value types.

In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the CSS-wide keywords as their property value. For readability they have not been repeated explicitly.

2. Terminology

CSS Sizing 3 § 2 Terminology

3. Specifying Box Sizes

CSS Sizing 3 § 3 Specifying Box Sizes

3.1. Sizing Properties

CSS Sizing 3 § 3.1 Sizing Properties

The size property is a shorthand that sets width and height in a single declaration. If the second value is omitted, it is copied from the first.

The size shorthand cannot be used in @page contexts, as @page already has an unrelated size descriptor for setting the page size.

The size property needs to be omitted from the preferred shorthand order in CSSOM, to avoid compat problems and conflicts with @page.

Name: min-size
Value: <'min-width'> <'min-height'>?
Initial: auto
Applies to: all elements
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Animation type: see individual properties
Canonical order: per grammar

The min-size property is a shorthand that sets min-width and min-height in a single declaration. If the second value is omitted, it is copied from the first.

Name: max-size
Value: <'max-width'> <'max-height'>?
Initial: none
Applies to: all elements
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Animation type: see individual properties
Canonical order: per grammar

The max-size property is a shorthand that sets max-width and max-height in a single declaration. If the second value is omitted, it is copied from the first.

3.2. New Sizing Values: the contain, stretch(), fit-content(), and calc-size() values

Integrate CSS Sizing 3 § 3.2 Sizing Values: the <length-percentage>, auto | none, stretch, min-content, max-content, and fit-content values

Level 4 adds the ability to use the contain, fit-content(), and calc-size() values in the sizing properties, thus expanding the <box-size> production as follows:

<box-size> = <length-percentage [0,∞]>
             | stretch | contain | min-content | max-content | fit-content
             | stretch(<length-percentage [0,∞]>) | fit-content(<length-percentage [0,∞]>)
             | <calc-size()>
stretch(<length-percentage [0,∞]>)
Fit the margin box to the size specified by the argument. For this purpose, treat auto margins as zero, and ignore margin collapsing, margin-trim, and other effects that suppress or truncate the margin.

Note: Although margin collapsing, etc. are ignored for the purpose of calculating this size, their effects are not otherwise suppressed, and apply as usual.

The <length-percentage> argument is resolved exactly as for <length-percentage> values standing alone.

Open discussion wrt details here. [Issue #5715]

fit-content(<length-percentage [0,∞]>)
Use the fit-content formula with the available space replaced by stretch() into the specified argument, i.e. min(max-content, max(min-content, stretch(<length-percentage>)).
Tests
contain
If the box has a preferred aspect ratio, applies contain-fit sizing, attempting to fit into the box’s constraints while maintaining its preferred aspect ratio insofar as possible. See § 6.1 Contain-fit Sizing: stretching while maintaining an aspect ratio.

If the box has no preferred aspect ratio, applies stretch-fit sizing.

calc-size()
See § 7 Calculating With Intrinsic Sizes: the calc-size() function.

Note: The none keyword is not usable within calc-size().

Note: These new values add to the set of values that the definition of <calc-size()> refers to as “allowed in the context”.

4. Aspect Ratios

Images often have a natural aspect ratio, which the CSS layout algorithms attempt to preserve as they resize the element.

The aspect-ratio property allows specifying this behavior for non-replaced elements, and for altering the effective aspect ratio of replaced elements.

We are still working through the details of this section. If there is any behavior specified here that would cause replaced elements with a preferred aspect ratio to behave differently than they would under the requirements of the CSS2, Flex Layout, and Grid Layout specs combined (without this specification in effect), this is an error and should be reported to the CSSWG. There is a list of open aspect-ratio issues.

4.1. Preferred Aspect Ratios: the aspect-ratio property

Name: aspect-ratio
Value: auto || <ratio>
Initial: auto
Applies to: all elements except inline boxes and internal ruby or table boxes
Inherited: no
Percentages: n/a
Computed value: specified keyword or a pair of numbers
Canonical order: per grammar
Animation type: by computed value
Tests

This property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

auto
Replaced elements with a natural aspect ratio use that aspect ratio; otherwise the box has no preferred aspect ratio. Size calculations involving the aspect ratio work with the content box dimensions always.
<ratio>
The box’s preferred aspect ratio is the specified ratio of width / height. Size calculations involving the aspect ratio work with the dimensions of the box specified by box-sizing.

If the <ratio> is degenerate, the property instead behaves as auto.

auto && <ratio>
If both auto and a <ratio> are specified together, the preferred aspect ratio is the specified ratio of width / height unless it is a replaced element with a natural aspect ratio, in which case that aspect ratio is used instead. In all cases, size calculations involving the aspect ratio work with the content box dimensions always.

If the <ratio> is degenerate, the property instead behaves as auto.

Tests

Note: Having a preferred aspect ratio does not make a box into a replaced element; layout rules specific to replaced elements do not generally apply to non-replaced boxes with a preferred aspect ratio. For example, a non-replaced absolutely-positioned box treats justify-self: normal as stretch, not as start (CSS Box Alignment 3 § 6.1.2 Absolutely-Positioned Boxes), even if it has a preferred aspect ratio

CSS2.1 does not cleanly differentiate between replaced elements vs. elements with an aspect ratio; need to figure out specific cases that are unclear and define them, either in the appropriate Level 3 spec or here.

This example sets each item in the grid to render as a square, determining the number of items and their widths by the available space. 
<ul>
  <li>…
  <li>…
  <li>…
  <li>…
</ul>

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
}
li {
  aspect-ratio: 1/1;
  overflow: auto;
}
This example uses the iframe element’s width and height attributes to set the aspect-ratio property, giving the iframe an aspect ratio to use for sizing so that it behaves exactly like an image with that aspect ratio. 
<iframe
  src="https://www.youtube.com/embed/0Gr1XSyxZy0"
  width=560
  height=315>

@supports (aspect-ratio: attr(width number) / 1) {
  iframe {
    aspect-ratio: attr(width number) / attr(height number);
    width: 100%;
    height: auto;
  }
}

If a replaced element’s only natural dimension is a natural width or a natural height, giving it a preferred aspect ratio also gives it an natural height or width, whichever was missing, by transferring the existing size through the preferred aspect ratio.

4.2. Effects of Preferred Aspect Ratio on Automatic Sizes

When a box has a preferred aspect ratio, its automatic sizes are calculated the same as for a replaced element with a natural aspect ratio and no natural size in that axis, see e.g. CSS2 § 10 and CSS Flexible Box Model Level 1 § 9.2. The axis in which the preferred size calculation depends on this aspect ratio is called the ratio-dependent axis, and the resulting size is definite if its input sizes are also definite. The opposite axis (on which the ratio-dependent axis size depends) is the ratio-determining axis.

Note: A preferred aspect ratio only ever has an effect if at least one of the box’s sizes is automatic. If neither width nor height is an automatic size, it can have no effect on its preferred sizes.

When we move all the sizing information here, rather than crowbar-ing our way into 2.1, then the core principle here is just: the resolved preferred size in the ratio-determining axis (before applying min/max) gets transferred thru the ratio. Min/max constraints get transferred afterwards, and then applied to each axis independently without regards to aspect-ratio.

Tests

4.2.1. Margin-collapsing

For the purpose of margin collapsing (CSS 2 § 8.3.1 Collapsing margins), if the block axis is the ratio-dependent axis, it is not considered to have a computed block-size of auto.

4.3. Automatic Content-based Minimum Sizes

In order to avoid unintentional overflow, the automatic minimum size in the ratio-dependent axis of a box with a preferred aspect ratio that is neither a replaced element, nor a scroll container in that axis, is its min-content size capped by its maximum size.

In the following example, the box is as wide as the container (as usual), and its height is as tall as needed to contain its content but at least as tall as it is wide. 
div {
  aspect-ratio: 1/1;
  /* 'width' and 'height' both default to 'auto' */
}

+----------+  +----------+  +----------+
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~  |  | ~~~~~~~~ |  | ~~~~~~~~ |
|          |  | ~~~      |  | ~~~~~~~~ |
+----------+  +----------+  | ~~~~~~~~ |
                            | ~~~~~~   |
                            +----------+

When overflow: auto is specified, however, even the box with excess content maintains the 1:1 aspect ratio (and handles overflow by becoming scrollable instead, as usual).

div {
  overflow: auto;
  aspect-ratio: 1/1;
}

+----------+  +----------+  +----------+
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~^|
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~  |  | ~~~~~~~~ |  | ~~~~~~~~ |
|          |  | ~~~      |  | ~~~~~~~~v|
+----------+  +----------+  +----------+

Overriding the min-height property also maintains the 1:1 aspect ratio, but will result in content overflowing the box if it is not otherwise handled.

div {
  aspect-ratio: 1/1;
  min-height: 0;
}

+----------+  +----------+  +----------+
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~~ |  | ~~~~~~~~ |  | ~~~~~~~~ |
| ~~~~~~~  |  | ~~~~~~~~ |  | ~~~~~~~~ |
|          |  | ~~~      |  | ~~~~~~~~ |
+----------+  +----------+  +-~~~~~~~~-+
                              ~~~~~~    
This automatic minimum operates in both axes. Consider this example: 
<div style="height: 100px; aspect-ratio: 1/1;">
  <span style="display: inline-block; width: 50px;"></span>
  <span style="display: inline-block; width: 150px;"></span>
</div>

The width of the container, being auto, resolves through the aspect ratio to 100px. However, its min-width, being auto, resolves to 150px. The resulting width of the container is thus 150px. To ignore the contents when sizing the container, min-width: 0 can be specified.

Tests

4.4. Min/Max Size Transfers

Sizing constraints in either axis (the origin axis) are transferred through the preferred aspect ratio and applied to any indefinite minimum, maximum, or preferred size in the other axis (the destination axis) as follows:

  • First, any definite minimum size is converted and transferred from the origin to destination axis. This transferred minimum is capped by any definite preferred or maximum size in the destination axis.

  • Then, any definite maximum size is converted and transferred from the origin to destination. This transferred maximum is floored by any definite preferred or minimum size in the destination axis as well as by the transferred minimum, if any.

Note: Thus, any definite sizes are completely unaffected by a transferred constraint; and a transferred minimum will never cause an element to exceed a definite preferred/maximum size, nor will a transferred maximum cause an element to violate its preferred/minimum size.

Note: The basic principle is that sizing constraints transfer through the aspect-ratio to the other side to preserve the aspect ratio to the extent that they can without violating any sizes specified explicitly on that affected axis. (This is the principle that drove the contents of the constraint table in CSS2 Section 10.4.)

In the following example: 
<div id=container style="height: 100px; float: left;">
  <div id=item style="height: 100%; aspect-ratio: 1/1;">content</div>
</div>

Since the height of the #item is a percentage that resolves against a definite container, the width of the item resolves to 100px for both its intrinsic size contributions as well as for final layout, so the container also sizes to a width of 100px.

<div id=container style="height: auto; float: left;">
  <div id=item style="height: 100%; aspect-ratio: 1/1;">content</div>
</div>

In this next example, the percentage height of the item cannot be resolved and behaves as auto (see CSS 2 § 10.5 Content height: the 'height' property). Since both axes now have an automatic size, the height becomes the ratio-dependent axis. Calculating the intrinsic size contributions of the box produces a width derived from its content, and a height calculated from that width and the aspect ratio, yielding a square box (and a container) sized to the width of the word “content”.

Tests

This section might not be written correctly. [Issue #6071]

5. Intrinsic Size Determination

5.1. Intrinsic Sizes

CSS Sizing 3 § 5.1 Intrinsic Sizes

5.2. Overriding Contained Intrinsic Sizes: the contain-intrinsic-* properties

Name: contain-intrinsic-width, contain-intrinsic-height, contain-intrinsic-block-size, contain-intrinsic-inline-size
Value: auto? [ none | <length [0,∞]> ]
Initial: none
Applies to: elements with size containment
Inherited: no
Percentages: n/a
Computed value: as specified, with <length> values computed
Canonical order: per grammar
Animation type: by computed value type
Logical property group: contain-intrinsic-size
Tests

These properties allow elements with size containment to specify an explicit intrinsic inner size, causing the box to size as if its in-flow content totals to a width and height matching the specified explicit intrinsic inner size (rather than sizing as if it were empty).

Note: This is not always equivalent to laying out as if the element had one child of the specified explicit intrinsic inner size. For example, a grid container with one child of the specified size would still size according to the specified grid, usually ending up with a larger content size than specified.

Tests
none | <length>

If no other contain-intrinsic-size value (such as auto) is providing an explicit intrinsic inner size, the corresponding axis either doesn’t have an explicit intrinsic inner size (if none is specified) or has an explicit intrinsic inner size of the specified <length>.

auto

If auto is specified and the element has a last remembered size and is currently skipping its contents, its explicit intrinsic inner size in the corresponding axis is the last remembered size in that axis.

Note: This occurs, for example, when an element with content-visibility: auto is off-screen.

Tests

If an element has an explicit intrinsic inner size in an axis, then after laying out the element as normal for size containment, the size of the contents in that axis are instead treated as being the explicit intrinsic inner size instead of what was calculated in layout, and layout is performed again if necessary. (If it has an explicit intrinsic inner size in both axises, this implies the first layout can be skipped.)

These four properties are part of a logical property group.

Note: An element with size containment is laid out as if it had no contents [CSS-CONTAIN-1], which in many cases this will cause the element to collapse to zero inner height. This can be corrected with an explicit height chosen to show the expected contents, but that can have unintended effects in some layout systems, such as Flex and Grid Layout, which treat an explicit height as a stronger command than an implicit content-based height. The element thus might lay out substantially differently than it would have were it simply filled with content up to that height. Providing an explicit intrinsic inner size for the element preserves the performance benefits of ignoring its contents for layout while still allowing it to size as if it had content.

Name: contain-intrinsic-size
Value: [ auto? [ none | <length [0,∞]> ] ]{1,2}
Initial: see individual properties
Applies to: see individual properties
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Animation type: see individual properties
Canonical order: per grammar
Tests

contain-intrinsic-size is a shorthand property that sets the contain-intrinsic-width and contain-intrinsic-height properties.

The first value represents the contain-intrinsic-width value, and the second represents the contain-intrinsic-height value. If only one value is given, it applies to both properties.

5.2.1. Last Remembered Size

Size containment is very valuable for ensuring a page can render efficiently, restricting the scope of layout work that can happen as a result of an element changing its rendering. However, it’s also very restrictive for the author, requiring them to correctly predict what the size of the element will be; if this guess is incorrect, even slightly, it can cause unsightly scrollbars or accidentally-hidden content.

The auto keyword of contain-intrinsic-size allows a middle-ground: if an element is ever not size-contained, this value causes the element to remember its size (calculated as normal by layout); then, if the element gains size containment later, it will use the remembered size, offering the performance benefits of size containment while probably sizing accurately to its contents.

Only elements capable of being ResizeObserver targets can have a last remembered size.

The last remembered size of an element is determined by:

Note: The last remembered size is state attached to the element, not any particular box generated by the element. So long as the element retains auto keyword in contain-intrinsic-size property, it will remember its last remembered size even across changes such as going to/from display: none.

Tests

5.2.2. Interaction With overflow: auto

The contain-intrinsic-size property provides an estimate of how large the author expects the content of an element to be, but this estimate is not actual content and does not represent anything that needs to be shown to the user. Therefore, an element with overflow: auto must not generate scrollbars as a consequence of contain-intrinsic-size.

However, if contain-intrinsic-size indicates a size large enough that the element would generate scrollbars if it contained actual content of that size, then the element must be sized as if it generated those scrollbar(s) in accordance with such hypothetical content.

In the following example code: 
div {
  width: max-content;
  contain-intrinsic-size: 100px 100px;
  overflow: auto;
}

The element ends up being 100px wide and 100px tall: contain-intrinsic-size provides the max-content width, and also the height.

If the element then ended up with content that was 150px tall, it would show a vertical scrollbar; if the scrollbar is not overlay, it will take up some of that 100px width, leaving a smaller amount (roughly 84px, typically) for the content to flow into. (See CSS Overflow 3 § 5 Scrollbars and Layout.)

Even though there’s now less than 100px of horizontal space available for the content, it will not generate a horizontal scrollbar just because contain-intrinsic-size indicates a 100px width; that would only happen if the actual content had something unbreakable and wider than the remaining space.

In contrast, in the following example code: 
div {
  width: max-content;
  contain-intrinsic-size: 100px 100px;
  height: 50px;
  overflow: auto;
}

The element has a fixed 50px height, but contain-intrinsic-size indicates a 100px “estimated content height”. The element thus assumes that it will need a vertical scrollbar when it’s filled with actual content, resulting in a max-content width a little more than 100px (roughly 116px, typically), to accommodate the estimated 100px of max-content width from contain-intrinsic-size, and as well as the vertical scrollbar width (roughly 16px, typically).

However, even though the element reserves space on the assumption of needing a scrollbar, it will not actually generate one unless the actual content overflows: if it ends up containing content that’s less than 50px tall, no vertical scrollbar will be generated at all, but the element will still be 116px wide.

5.3. Responsively-sized iframes: the frame-sizing property

Name: frame-sizing
Value: auto | content-width | content-height | content-block-size | content-inline-size
Initial: auto
Applies to: replaced elements (but see below for details)
Inherited: no
Percentages: n/a
Computed value: as specified
Canonical order: per grammar
Animation type: discrete

Some replaced elements can contain "normal" flowed content, such as HTML iframes. For privacy and security reasons, these elements do not, by default, expose any information about their internal contents' sizing to the outside page, instead just using a static, predetermined intrinsic size, and making their contents scrollable. The frame-sizing property allows these elements to opt into exposing their actual content size, known as their internal layout intrinsic size. Values have the following meaning:

auto

The element’s internal layout intrinsic size, if any, is ignored.

content-width
content-height
content-block-size
content-inline-size

If the element has an internal layout intrinsic size, its intrinsic size takes the corresponding dimension (either width or height) from the internal layout intrinsic size. (The other dimension is determined normally.)

Logical directions resolve based on the writing mode of the element. (Not the embedded document.)

Which elements can have an internal layout intrinsic size, and how it’s determined, are decided by the document language. In HTML, only iframe elements can have an internal layout intrinsic size, and further, only when the contained document has also opted in via a <meta name=responsive-embedded-sizing> element. (See § 5.3.1 HTML iframe Details.)

When the embedded document has the following HTML: 
<meta name="responsive-embedded-sizing">
<div style="height: 500px"></div>

and the embedding document has the following CSS:

iframe {
  frame-sizing: content-height;
}

The height of the iframe will initially be the default iframe height (typically 150px), but will be updated to 500px once the iframe’s document loads.

In addition, the internal document can call window.requestResize() to update its internal layout intrinsic size later.

5.3.1. HTML iframe Details

In HTML, only the iframe element can have an internal layout intrinsic size, and only when the iframe’s embedded document has opted in appropriately.

An HTML Document object has an responsive embedded sizing flag associated with it, which is initially unset. It is set to true or false during the initial document parse, depending on which of the following first occurs:

  • If a <meta name=responsive-embedded-sizing> element is encountered, it is set to true.

  • If the body element is opened (explicitly or implicitly), or inserted into the document by the parser, it is set to false.

Once set to either true or false, the flag will not change its value again for the lifetime of the Document.

Note: Currently, the HTML meta element appearing in the head of an HTML document is the only way for an embedded document to opt into this feature in HTML. This means that SVG documents in iframe cannot do so.

Note: Due to quirks of the HTML parser, a meta element can technically appear between the head and body elements, and will be reparented into the head. This is still a valid location for the <meta name=responsive-embedded-sizing> element, as the body has not yet been opened. Note that most HTML elements will implicitly open a body element even if the body start tag is not present, and if the document completely lacks such an element, an empty one is automatically generated and inserted.

The internal layout intrinsic size is first set by the results of the embedded document’s first layout after it fires its DOMContentLoaded event, and again when the load event is fired at the Window. Subsequent changes to content, styling or layout of the embedded document do not automatically affect the internal layout intrinsic size, but see requestResize().

An embedded document can additionally have a locked embedded ICB size, which is initially null. If the document’s responsive embedded sizing flag is true when it performs a layout, and its locked embedded ICB size is null, it records its current initial containing block size as its locked embedded ICB size. On subsequent layouts, it uses its locked embedded ICB size instead of calculating its initial containing block size normally.

Note: This freezing of the ICB reduces the chance of layout loops (an iframe document sizing to slightly larger than its ICB, then the parent iframe changing size to match, and the next layout again making it slightly larger than the ICB, etc to infinity).

Do we want to have a way to force an iframe to forget its locked embedded ICB size? Maybe turning frame-sizing off and on again?

Navigating the iframe’s document causes it to forget its locked embedded ICB size. It does not forget its internal layout intrinsic size as long as the new document’s responsive embedded sizing flag is unset. Once the flag is set (to true or false), the internal layout intrinsic size is forgotten; if the flag is set to true, both are then freshly computed as normal.

5.3.2. Extensions to the Window Interface

partial interface Window {
  undefined requestResize();
};
When requestResize() is invoked:

  1. Let navigable be the navigable that has this as its content window. If navigable is not a child navigable, throw a NotAllowedError DOMException.

  2. Let host element be the navigable container whose content navigable is navigable. If host element is not an HTML iframe element, throw a NotAllowedError DOMException.

  3. Let document be this’s active document. If document’s responsive embedded sizing flag is unset or false, throw a NotAllowedError DOMException.

  4. If document has pending style or layout changes, perform them.

  5. Set the internal layout intrinsic size of host element to the width and height of the scrolling area of this.

5.4. Intrinsic Size Contributions

CSS Sizing 3 § 5.2 Intrinsic Contributions

5.5. Zeroing Min-Content Size Contributions: the min-intrinsic-sizing property

Name: min-intrinsic-sizing
Value: legacy | zero-if-scroll || zero-if-extrinsic
Initial: legacy
Applies to: all elements except inline boxes
Inherited: no
Percentages: n/a
Computed value: as specified
Canonical order: per grammar
Animation type: discrete

This property seriously needs some name bikeshedding.

This property defines whether the min-content contribution of a non-replaced box is “compressed” under certain circumstances. Values have the following meanings:

legacy
The box’s min-content contribution is handled as normal.
zero-if-scroll
The box’s min-content contribution is “compressed” if it is a scroll container in that axis.
zero-if-extrinsic
The box’s min-content contribution is “compressed” if has an extrinsic preferred or maximum size.

Note: This is the default behavior of most replaced elements.

The following rule will make all scroll containers essentially ignore their contents when passing up their size contributions (unless they specifically requested a content-based size): 
*, ::before, ::after { min-intrinsic-sizing: zero-if-scroll; }

This prevents the scroll container from blowing up the size of its ancestors if it contains large items such as a table or long lines of unbreakable text. Meanwhile, it allows boxes that are not scroll containers to continue influencing the min-content size of their ancestors.

Note: The behavior of zero-if-scroll would have been a better default, but due to Web-compat, it cannot be the initial value. :(

The “compressed” min-content contributions is calculated by pretending the box were empty, except when factoring in sizing constraints imposed by explicit min-content, max-content, and fit-content values of the sizing properties.

5.5.1. Intrinsic Contributions of Percentage-Sized Boxes

Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency. See CSS Sizing 3 § 5.2.1 Intrinsic Contributions of Percentage-Sized Boxes for how to resolve these.

For fit-content(), if the <length-percentage> expression on its own would resolve to the property’s initial value, then instead:

5.6. New Column Sizing Values: the stretch, min-content, max-content, fit-content, and fit-content() values

Name: column-width
New values: auto | <box-size>
Computed value: as specified, with <length-percentage> values computed
Animation type: by computed value type

When used as values for column-width, the new keywords specify the optimal column width:

stretch
Specifies the optimal column width as the stretch-fit inline size of the multi-column container.
min-content
Specifies the optimal column width as the min-content inline size of the multi-column container’s contents.
max-content
Specifies the optimal column width as the max-content inline size of the multi-column container’s contents.
fit-content
Specifies the optimal column width as min(max-content inline size, max(min-content inline size, stretch-fit inline size)).
fit-content(<length-percentage>)
Specifies the optimal column width as min(max-content size, max(min-content size, <length-percentage>))

Note: The column width never varies by column. When the column width is informed by the multi-column container’s contents (as in the keywords above), all of its contents are taken under consideration and the calculated width is shared by all the columns.

6. Extrinsic Size Determination

CSS Sizing 3 § 4 Extrinsic Size Determination

6.1. Contain-fit Sizing: stretching while maintaining an aspect ratio

Contain-fit sizing essentially applies stretch-fit sizing, but reduces the size of the box in one axis to maintain the box’s preferred aspect ratio, similar to the contain keyword of the object-fit and background-size properties.

First, a target rectangle is determined:

  1. The initial target rectangle is the size of the box’s containing block, with any indefinite size assumed as infinity. If both dimensions are indefinite, the initial target rectangle is set to match the outer edges of the box were it stretch-fit sized.
  2. Next, if the box has a non-none max-width or max-height, the target rectangle is clamped in the affected dimension to less than or equal to the “maximum size” of the box’s margin box, i.e. the size its margin box would be if the box was sized at its max-width/height. (Note that, consistent with normal box-sizing rules, this “maximum size” is floored by the effects of the box’s min-width/min-height.)
  3. Last, the target rectangle is reduced in one dimension by the minimum necessary for it to match the box’s preferred aspect ratio.

The contain-fit size in each dimension is the size that would result from stretch-fitting into the target rectangle.

Copy whatever stretch-fit ends up doing wrt margin collapsing.

If there is a minimum size in one dimension that would cause overflow of the target rectangle if the aspect ratio were honored, do we honor the aspect ratio or skew the image? If the former, we need a step similar to #2 that applies the relevant minimums.

6.2. Percentage Sizing

…

7. Calculating With Intrinsic Sizes: the calc-size() function

Tests

Transitioning between two <length-percentage> sizes, or slightly adjusting one, can be done easily with calc(): halfway between 100% and 20px is calc(50% + 10px), for example. But these operations are no longer possible if the size you want to adjust or transition to/from is a non-numeric value such as auto or fit-content or a cyclic percentage size. [CSS-SIZING-3]

The calc-size() function allows math and transition/animation to be performed on these sizes in a safe, well-defined way. Its syntax is as follows:

<calc-size()> = calc-size( <calc-size-basis>, <calc-sum> )
<calc-size-basis> = [ <size-keyword> | <calc-sum> | <calc-size()> | any ]

The first argument given is the calc-size basis, which represents the size the calc-size() is based on, and the second is the calc-size calculation, which represents the size that calc-size() will actually resolve to, based on the calc-size basis.

Some examples: 
height: calc-size(auto, 0);           /* used height is zero */
height: calc-size(auto, 50%);         /* used height is 50% of the container */
height: calc-size(auto, size / 2);    /* used height is 50% of auto */
height: calc-size(auto, size);        /* used height is auto */
height: calc-size(auto, size + 10px); /* used height is auto + 10px */
height: calc-size(auto, round(up, size, 20px));
                                      /* used height is rounded up to the
                                         nearest multiple of 20px */
height: calc-size(any,  size / 2);    /* declaration is invalid */

The calc-size basis values are:

<size-keyword>

Indicates that the calc-size() is basing its size off of the specified keyword. Represents any sizing keywords allowed in the context where the function is used. For example, in width, it matches auto, min-content, stretch, etc. Also allows any related sizing functions, like the fit-content() function in width/etc., which is a variation of the fit-content keyword. For all purposes other than actually resolving the size, the calc-size() acts like this keyword.

The calc-size calculation will use the corresponding size as the value of its size keyword.

<calc-sum>

Indicates that the calc-size() is basing its size off of the specified calculation. For all purposes other than actually resolving the size, the calc-size() acts like this calculation wrapped in a calc() (including, for example, whether it represents a definite or indefinite size).

The calc-size calculation will use the corresponding size as the value of its size keyword.

<calc-size()>

Indicates that the outer calc-size() is basing its size off of this inner calc-size(), and will share the same behavior as it.

The calc-size calculation will use the size of the inner calc-size() as its size keyword. The size keyword is allowed, in this case, even if the inner calc-size() uses any.

For example, in calc-size(calc-size(min-content, size / 2), size + 10%), the outer calc-size() acts as if its calc-size basis was min-content, and will calculate its own size using the result of the inner calc-size(), equivalent to calc-size(min-content, size / 2 + 10%).
Why can calc-size() be nested?

Allowing calc-size() as the basis argument means that authors can use a variable as the basis (like calc-size(var(--foo), size + 20px)) and it will always work as long as the variable was originally valid for the property.

Doing the same with just calc() doesn’t work - for example, if you have --foo: calc-size(min-content, size + 20px), or even just --foo: min-content, then calc( (var(--foo)) + 20px ) fails.

The nesting is simplified away during interpolation, and at used-value time, so the basis always ends up as a simple value by the time interpolation and other effects occur; see § 7.2.1 Simplifying calc-size().

any

Indicates that the calc-size() does not depend on any additional information, and thus can be interpolated with any other size. The calc-size() function represents a definite size.

The calc-size calculation cannot use the size keyword; it is a syntax error for size to appear in the calc-size calculation.

Note: calc-size(any, ...) is mostly identical to calc(...), but it is automatically interpolatable with other sizing keywords, regardless of the interpolate-size value. (It does treat percentages slightly differently, if the containing block’s size is not definite.)

For the purpose of sizing (including for intrinsic size contributions), calc-size() resolves to the result of its calc-size calculation.

For either argument, if a <calc-sum> is given, its type must match <length-percentage>, and it must resolve to a <length>. See CSS Values 4 § 10.9 Type Checking. Like calc(), it inherits the property’s calculation context. However, a <calc-size()> is specifically not a <length>; any place that wants to accept calc-size() must explicitly include it in its grammar.

Within the calc-size calculation, the size is a <calc-keyword> which is a <length>, and resolves at used value time to the size specified above.

Why not just allow intrinsic keywords in calc()?

In theory, rather than introducing calc-size(), we could have defined calc(auto * .5) to be valid, allowing interpolation to work as normal.

This has the minor issue that mixing keywords still wouldn’t be allowed, but it wouldn’t be as obvious (that is, calc((min-content + max-content)/2) looks reasonable, but would be disallowed).

The larger issue, though, is that this wouldn’t allow us to smoothly transition percentages. calc(50%) is only half the size of calc(100%) when percentages are definite in the context; if they’re not, the two values will usually be the same size (depending on the context, either 0px or auto-sized).

Using a new function that explicitly separates the size you’re calculating against from the calculation itself lets us get smooth interpolation in all cases.

An additional consideration is that there are many effects, some small and some large, that depend on whether an element is intrinsically sized or definite. Consider, for example, margin collapsing. Using calc() would mean that the answer to the question “is the element intrinsically-sized” can have one answer in the middle of a transition (“yes”, for calc(min-content * .2 + 20px * .8))), but a different answer at the end of the transition (“no”, for calc(20px)), causing the layout to jump at the end of an otherwise-smooth transition.

(This issue is similar to the stacking-layer changes that can occur when animating from opacity:1 to opacity: 0: any non-1 value forces a stacking context, but 1 does not. With opacity you can get around this by animating to .999, which is visually indistinguishable from 1 but forces a stacking context. It’s not as reasonable to ask people to animate to calc(auto * .0001) to ensure it retains its intrinsic-ness.)

Using a new function that identifies itself as nominally being a keyword size, like calc-size(auto, 20px), means we can maintain stable layout behaviors the entire time, even when the actual size is a definite length.

7.1. Resolving calc-size()

Before used value time, calc-size() functions are not resolved or simplified. (But see § 7.2 Interpolating calc-size().)

At used value time, the calc-size calculation is resolved just like the value of a calc() expression, by substituting in the used value of the calc-size basis for the size keyword in the calc-size calculation, and evaluating any percentages normally (if they are definite) or against 0px (if they are not).

Percentages in the calc-size basis resolve as normal so you can always smoothly transition to any size, regardless of its value or behavior. For example, calc-size(100%, size) is guaranteed to interpolate smoothly with calc-size(100%, 0px), producing intermediate values like calc-size(100%, size * .5). Without calc-size(), interpolation from 100% to 0px only works as expected if the percentage is definite; otherwise, the intermediate values like calc(50%) might all behave as auto and not change size at all.

Percentages in the calc-size calculation, on the other hand, are resolved to 0px when they would otherwise be indefinite, to avoid making the calc-size() potentially act in two different ways. There are some cases where a min-content size, for example, will cause different layout effects than a 100% size, and so a calc-size() has to commit to one behavior or the other.

7.2. Interpolating calc-size()

Tests

Whether two calc-size() functions can be interpolated depends on their calc-size basis values (after being prepared for interpolation):

If either function returned failure from being prepared for interpolation

The values cannot be interpolated.

If they are identical

The result’s calc-size basis is that basis value.

If either is any

The result’s calc-size basis is the non-any basis.

Otherwise (if they don’t match and neither side is any)

The values cannot be interpolated.

If they can be interpolated, the result’s calc-size calculation is the interpolation of the two input calc-size calculations.

Note: These interpolation restrictions ensure that a calc-size() doesn’t try to act in two different ways at once. There are some cases where a min-content and max-content would produce different layout behaviors, for example, so the calc-size() has to masquerade as one or the other. This, unfortunately, means you can’t transition between keywords, like going from auto to min-content.

Some calc-size() values can also be interpolated with a <length-percentage> or an <size-keyword>. To determine whether the values can interpolate and what the interpolation behavior is, treat the non-calc-size() value as calc-size(any, value ) if the value is a <calc-sum> or as calc-size( value , size) otherwise, and apply the rules above.

For example, calc-size() allows interpolation to/from height: auto: 
details {
  transition: height 1s;
}
details::details-content {
  display: block;
}
details[open]::details-content {
  height: auto;
}
details:not([open])::details-content {
  height: calc-size(any, 0px);
}

This will implicitly interpolate between calc-size(auto, size) and calc-size(any, 0px). Half a second after opening the details, the ::details-content wrapper’s height will be calc-size(auto, size * .5), half its open size; thruout the transition it’ll smoothly animate its height.

Note: These rules allow calc-size(any, definite length) to always interpolate smoothly, regardless of how the other side of the transition is specified.

Note: This "upgrade a plain value into a calc-size()" behavior puts <length-percentage> values into the calc-size calculation. This allows values with percentages to interpolate with intrinsic size keywords, but does mean that when a percentage isn’t definite, it’ll resolve to zero. If you want to resolve to the actual size the percentage would make the element, explicitly write a calc-size() with the value in its calc-size basis, like calc-size(50%, size).

7.2.1. Simplifying calc-size()

Identically to math functions, the calc-size calculation (and calc-size basis, if it’s a <calc-sum>) of a calc-size() function is simplified at specified value and computed value time.

Before interpolation, calc-size() functions are prepared for interpolation so their calc-size basises can be compared, and their calc-size calculations can be interpolated properly. This is a more involved process than simplifying a calculation tree, and can potentially fail.

To prepare for interpolation a calc-size() function:
  1. First, simplify the calc-size basis, recursing as needed:
    If the calc-size basis is a calc-size() function itself

    The calc-size basis of the outer function is replaced with that of the inner function, and the inner function’s calc-size calculation is substituted into the outer function’s calc-size calculation.

    Otherwise, if the calc-size basis is a <calc-sum> whose type matches <length> (no percentage present)

    Replace the basis with any, and the original basis is substituted into the calc-size calculation.

    Otherwise, if the calc-size basis is any other <calc-sum> (contains a percentage)

    Replace the basis with 100% and the original basis is de-percentified, then substituted into the calc-size calculation.

    If any substitute into a calc-size calculation returns failure, the entire operation immediately returns failure.

  2. Next, simplify the calc-size calculation as defined in CSS Values 4 § 10.10.1 Simplification.

Note: After simplification, the calc-size basis of a calc-size() function will either be a single keyword or the value 100%.

To substitute into a calc-size calculation calc a value insertion value:

  1. If calc doesn’t have the size keyword in it, do nothing.

  2. Otherwise, replace every instance of the size keyword in calc with insertion value, wrapped in parentheses.

  3. If this substitution would produce a value larger than an UA-defined limit, return failure.

    Note: This is intentionally identical to the protection against substitution attacks defined for variable substitution; see CSS Variables 1 § 3.3 Safely Handling Overly-Long Variables. However, the use-cases for very long calc-size() values are much less than for long custom properties, so UAs might wish to impose a smaller size limit.

To de-percentify a calc-size calculation calc:

  1. Replace every instance of a <percentage-token> in calc with (size * N), where N is the percentage’s value divided by 100. Return calc.

Note: For example, 50% + 20px becomes (size * .5) + 20px.

Why are percentages simplified in this way?

This percentage simplification ensures that transitions work linearly.

For example, say that 100% resolves to 100px.

If you transitioned from calc-size(100px, size * 2) (resolves to 200px) to calc-size(50%, size - 20px) (resolves to 30px) by interpolating both the arguments, then at the halfway point you’d have calc-size(75px, size * 2 * .5 + (size - 20px) * .5) (resolves to 102.5px), which is not halfway between 30 and 200 (that would be 115px). Interpolating one argument, then substituting it into another calculation and interpolating that one too, generally gives quadratic interpolation behavior.

Instead, we substitute the basis arg into the calculation arg, so you get calc-size(any, 100px * 2) and calc-size(100%, (size * .5) - 20px), and when interpolated, at the halfway point you get calc-size(100%, 100px * 2 * .5 + ((size * .5) - 20px) * .5), which does indeed resolve to 115px, as expected. Other points in the transition are similarly linear.

7.3. Automatically interpolating sizing keywords: the interpolate-size property

Name: interpolate-size
Value: numeric-only | allow-keywords
Initial: numeric-only
Applies to: all elements
Inherited: yes
Percentages: n/a
Computed value: as specified
Canonical order: per grammar
Animation type: not animatable

This property allows keywords on the sizing properties to smoothly combine with <length-percentage> values rather than using discrete animation for this case. (See Web Animations § 5.2 Animating properties.)

numeric-only
A <size-keyword> can only be combined with a compatible <calc-size()>.
allow-keywords
Sizing values can also be combined if one of them is an <size-keyword> and the other is a <length-percentage>. This is done by treating the <size-keyword> keyword as though it is calc-size(keyword, size) and applying the rules in § 7.2 Interpolating calc-size(). In other cases, a <size-keyword> still cannot be interpolated.

Note: Setting allow-keywords allows most size values to be interpolated, but not all; different keywords are still not interpolable with each other, as layout algorithms can change their behavior based on precisely which sizing keyword a descendant is using, in a way that can’t be represented during interpolation.

Note: Setting allow-keywords mostly removes the need to use calc-size() manually, but there are still some cases that can benefit from using it. For example, if the containing block size is indefinite, naively interpolating width: 100% to width: 0px won’t work as expected (since the intermediate values might behave as auto, making them the same size as 100%), but manually writing width: calc-size(100%, size); and/or width: calc-size(any, 0px); will, causing the element to smoothly interpolate between the two values.

Note: If we had a time machine, this property wouldn’t exist; the allow-keywords behavior would just be how things worked by default. It exists because many existing style sheets assume that the sizing keywords (auto, min-content, etc.) cannot interpolate at all, and would produce broken behavior if they started interpolating. For compatibility with this assumption, allowing this interpolation requires an opt-in. Because the property inherits, specifying :root { interpolate-size: allow-keywords; } allows the new behavior for the entire page. We suggest doing this wherever compatibility isn’t an issue.

The value of interpolate-size that matters is the computed value on the element at the time the animation might start. For CSS transitions, this means the value in the after-change style. An animation is not stopped or started later because interpolate-size changes.

Changes

Changes since 4 September 2026 Working Draft

Significant changes since the 4 September 2026 Working Draft include:

Changes since 5 May 2021 Working Draft

Significant changes since the 5 May 2021 Working Draft include:

Changes since 20 October 2020 Working Draft

Significant changes since the 20 October 2020 Working Draft include:

Significant changes since the 26 May 2020 First Public Working Draft include:

  • Define ratio-determining axis as a term.

  • Define that min/max sizing constraints are transferred across an aspect-ratio, (Issue 5257)

    Additionally, sizing constraints in either axis (the origin axis) are transferred through the preferred aspect ratio to the other axis (the destination axis) as follows:

    • First, any definite minimum size is converted and transferred from the origin to destination axis. This transferred minimum is capped by any definite preferred or maximum size in the destination axis.

    • Then, any definite maximum size is converted and transferred from the origin to destination. This transferred maximum is floored by any definite preferred or minimum size in the destination axis as well as by the transferred minimum, if any.

    Note: The basic principle is that sizing constraints transfer through the aspect-ratio to the other side to preserve the aspect ratio to the extent that they can without violating any sizes specified explicitly on that affected axis.

  • Clarify that aspect-ratio on a replaced element with only one natural size determines the other dimension. (Issue 5306)

    If a replaced element’s only natural dimension is a natural width or a natural height, giving it a preferred aspect ratio also gives it a natural height or width, whichever was missing, by transferring the existing size through the preferred aspect ratio.

  • Define that aspect-ratio inhibits margin self-collapsing (Issue 5328)

    For the purpose of margin collapsing (CSS 2 § 8.3.1 Collapsing margins), if the block axis is the ratio-dependent axis, it is not considered to have a computed block-size of auto.

Additions Since Level 3

Acknowledgments

Special thanks go to Aaron Gustafson, L. David Baron for their contributions to this module.

Privacy Considerations

This specification introduces no new privacy considerations.

Security Considerations

This specification introduces no new security considerations.

Conformance

Document conventions

Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” or are set apart from the normative text with class="example", like this:

This is an example of an informative example.

Informative notes begin with the word “Note” and are set apart from the normative text with class="note", like this:

Note, this is an informative note.

Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <strong class="advisement">, like this: UAs MUST provide an accessible alternative.

Tests

Tests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative.

    Conformance classes

    Conformance to this specification is defined for three conformance classes:

    style sheet
    A CSS style sheet.
    renderer
    A UA that interprets the semantics of a style sheet and renders documents that use them.
    authoring tool
    A UA that writes a style sheet.

    A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module.

    A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.)

    An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module.

    Partial implementations

    So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.

    Implementations of Unstable and Proprietary Features

    To avoid clashes with future stable CSS features, the CSSWG recommends following best practices for the implementation of unstable features and proprietary extensions to CSS.

    Non-experimental implementations

    Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec.

    To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group.

    Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at http://www.w3.org/Style/CSS/Test/. Questions should be directed to the public-css-testsuite@w3.org mailing list.

    Index

    Terms defined by this specification

    Terms defined by reference

    • [CSS-ALIGN-3] defines the following terms:
      • justify-self
      • start
      • stretch (for align-self)
      • stretch (for justify-self)
    • [CSS-BACKGROUNDS-3] defines the following terms:
      • background-size
    • [CSS-BOX-4] defines the following terms:
      • content box
      • margin
      • margin box
      • margin-trim
    • [CSS-CASCADE-5] defines the following terms:
      • computed value
      • shorthand
      • shorthand property
      • specified value
      • used value
    • [CSS-COLOR-4] defines the following terms:
      • opacity
    • [CSS-CONTAIN-2] defines the following terms:
      • content-visibility
      • size containment
      • skipping its contents
    • [CSS-DISPLAY-4] defines the following terms:
      • containing block
      • display
      • in-flow
      • initial containing block
      • inline box
      • non-replaced
      • principal box
      • replaced element
    • [CSS-GRID-2] defines the following terms:
      • grid container
    • [CSS-IMAGES-3] defines the following terms:
      • natural aspect ratio
      • natural dimension
      • natural height
      • natural size
      • natural width
    • [CSS-IMAGES-4] defines the following terms:
      • contain
      • object-fit
    • [CSS-LOGICAL-1] defines the following terms:
      • block-size
      • logical property group
    • [CSS-MULTICOL-2] defines the following terms:
      • column-width
    • [CSS-OVERFLOW-3] defines the following terms:
      • overflow
      • scroll container
    • [CSS-PAGE-3] defines the following terms:
      • @page
      • size
    • [CSS-POSITION-3] defines the following terms:
      • absolutely-positioned
    • [CSS-SIZING-3] defines the following terms:
      • auto
      • automatic minimum size
      • automatic size
      • available space
      • behave as auto
      • behaves as auto
      • box-sizing
      • cyclic percentage size
      • definite
      • definite size
      • extrinsic sizing
      • fit-content
      • height
      • indefinite
      • intrinsic size
      • intrinsic size contribution
      • max-content
      • max-content inline size
      • max-content size
      • maximum size
      • min-content
      • min-content contribution
      • min-content inline size
      • min-content size
      • minimum size
      • none
      • preferred size
      • preferred size property
      • sizing property
      • stretch-fit inline size
      • stretch-fit size
      • width
    • [CSS-SIZING-4] defines the following terms:
      • calc-size()
    • [CSS-SYNTAX-3] defines the following terms:
      • <percentage-token>
    • [CSS-TRANSITIONS-1] defines the following terms:
      • after-change style
    • [CSS-TYPED-OM-1] defines the following terms:
      • match
      • type
    • [CSS-VALUES-4] defines the following terms:
      • ,
      • <calc-keyword>
      • <calc-sum>
      • <length-percentage>
      • <length>
      • <ratio>
      • ?
      • calc()
      • calculation
      • calculation contexts
      • CSS-wide keywords
      • degenerate ratio
      • interpolation
      • math function
      • simplify a calculation tree
      • simplifying a calculation tree
      • {A,B}
      • |
      • ||
    • [CSS-WRITING-MODES-4] defines the following terms:
      • block axis
      • writing mode
    • [CSS2] defines the following terms:
      • document language
      • max-height
      • max-width
      • min-height
      • min-width
    • [CSSOM-1] defines the following terms:
      • preferred shorthand order
    • [CSSOM-VIEW-1] defines the following terms:
      • scrolling area
    • [DOM] defines the following terms:
      • Document
    • [HTML] defines the following terms:
      • DOMContentLoaded
      • Window
      • active document
      • body
      • child navigable
      • content navigable
      • content window
      • details
      • head
      • iframe
      • load
      • meta
      • navigable
      • navigable container
    • [RESIZE-OBSERVER-1] defines the following terms:
      • ResizeObserver
    • [WEB-ANIMATIONS-1] defines the following terms:
      • discrete
    • [WEBIDL] defines the following terms:
      • DOMException
      • NotAllowedError
      • this
      • throw
      • undefined

    References

    Normative References

    [CSS-ALIGN-3]
    Elika Etemad; Tab Atkins Jr.. CSS Box Alignment Module Level 3. URL: https://drafts.csswg.org/css-align/
    [CSS-BACKGROUNDS-3]
    Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. URL: https://drafts.csswg.org/css-backgrounds/
    [CSS-BOX-4]
    Elika Etemad. CSS Box Model Module Level 4. URL: https://drafts.csswg.org/css-box-4/
    [CSS-CASCADE-5]
    Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. URL: https://drafts.csswg.org/css-cascade-5/
    [CSS-CONTAIN-1]
    Tab Atkins Jr.; Florian Rivoal. CSS Containment Module Level 1. URL: https://drafts.csswg.org/css-contain-1/
    [CSS-CONTAIN-2]
    Tab Atkins Jr.; Florian Rivoal; Vladimir Levin. CSS Containment Module Level 2. URL: https://drafts.csswg.org/css-contain-2/
    [CSS-DISPLAY-4]
    Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 4. URL: https://drafts.csswg.org/css-display-4/
    [CSS-IMAGES-3]
    Tab Atkins Jr.; Elika Etemad; Lea Verou. CSS Images Module Level 3. URL: https://drafts.csswg.org/css-images-3/
    [CSS-IMAGES-4]
    Elika Etemad; Tab Atkins Jr.; Lea Verou. CSS Images Module Level 4. URL: https://drafts.csswg.org/css-images-4/
    [CSS-LOGICAL-1]
    Elika Etemad; Rossen Atanassov. CSS Logical Properties and Values Module Level 1. URL: https://drafts.csswg.org/css-logical-1/
    [CSS-MULTICOL-2]
    Florian Rivoal; Rachel Andrew. CSS Multi-column Layout Module Level 2. URL: https://drafts.csswg.org/css-multicol-2/
    [CSS-OVERFLOW-3]
    Elika Etemad; Florian Rivoal. CSS Overflow Module Level 3. URL: https://drafts.csswg.org/css-overflow-3/
    [CSS-PAGE-3]
    Elika Etemad. CSS Paged Media Module Level 3. URL: https://drafts.csswg.org/css-page-3/
    [CSS-SIZING-3]
    Tab Atkins Jr.; Elika Etemad. CSS Box Sizing Module Level 3. URL: https://drafts.csswg.org/css-sizing-3/
    [CSS-SIZING-4]
    Tab Atkins Jr.; Elika Etemad; Jen Simmons. CSS Box Sizing Module Level 4. URL: https://drafts.csswg.org/css-sizing-4/
    [CSS-SYNTAX-3]
    Tab Atkins Jr.; Simon Sapin. CSS Syntax Module Level 3. URL: https://drafts.csswg.org/css-syntax/
    [CSS-TRANSITIONS-1]
    Chris Marrin; et al. CSS Transitions Module Level 1. URL: https://drafts.csswg.org/css-transitions/
    [CSS-TYPED-OM-1]
    Tab Atkins Jr.; François Remy. CSS Typed OM Level 1. URL: https://drafts.css-houdini.org/css-typed-om-1/
    [CSS-VALUES-3]
    Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. URL: https://drafts.csswg.org/css-values-3/
    [CSS-VALUES-4]
    Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. URL: https://drafts.csswg.org/css-values-4/
    [CSS-WRITING-MODES-4]
    Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. URL: https://drafts.csswg.org/css-writing-modes-4/
    [CSS2]
    Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. URL: https://drafts.csswg.org/css2/
    [CSS3COL]
    Florian Rivoal; Rachel Andrew. CSS Multi-column Layout Module Level 1. URL: https://drafts.csswg.org/css-multicol/
    [CSSOM-1]
    Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). URL: https://drafts.csswg.org/cssom/
    [CSSOM-VIEW-1]
    Simon Fraser; Emilio Cobos Álvarez. CSSOM View Module. URL: https://drafts.csswg.org/cssom-view/
    [DOM]
    Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
    [HTML]
    Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
    [RESIZE-OBSERVER-1]
    Aleks Totic; Greg Whitworth. Resize Observer. URL: https://drafts.csswg.org/resize-observer/
    [RFC2119]
    S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
    [WEB-ANIMATIONS-1]
    Brian Birtles; et al. Web Animations. URL: https://drafts.csswg.org/web-animations-1/
    [WEBIDL]
    Edgar Chen; Timothy Gu. Web IDL Standard. Living Standard. URL: https://webidl.spec.whatwg.org/

    Non-Normative References

    [CSS-COLOR-4]
    Tab Atkins Jr.; Chris Lilley; Lea Verou. CSS Color Module Level 4. URL: https://drafts.csswg.org/css-color-4/
    [CSS-GRID-2]
    Tab Atkins Jr.; et al. CSS Grid Layout Module Level 2. URL: https://drafts.csswg.org/css-grid-2/
    [CSS-POSITION-3]
    Elika Etemad; Tab Atkins Jr.. CSS Positioned Layout Module Level 3. URL: https://drafts.csswg.org/css-position-3/
    [CSS-VALUES-5]
    Tab Atkins Jr.; Elika Etemad; Miriam Suzanne. CSS Values and Units Module Level 5. URL: https://drafts.csswg.org/css-values-5/
    [CSS-VARIABLES-1]
    Tab Atkins Jr.. CSS Custom Properties for Cascading Variables Module Level 1. URL: https://drafts.csswg.org/css-variables/

    Property Index

    IDL Index

    partial interface Window {
  undefined requestResize();
};

    Issues Index

    This is a diff spec over CSS Sizing Level 3. It is currently an Exploratory Working Draft: if you are implementing anything, please use Level 3 as a reference. We will merge the Level 3 text into this draft once it reaches CR. ↵
    CSS Sizing 3 § 2 Terminology ↵
    CSS Sizing 3 § 3 Specifying Box Sizes ↵
    CSS Sizing 3 § 3.1 Sizing Properties ↵
    The size property needs to be omitted from the preferred shorthand order in CSSOM, to avoid compat problems and conflicts with @page. ↵
    Integrate CSS Sizing 3 § 3.2 Sizing Values: the <length-percentage>, auto | none, stretch, min-content, max-content, and fit-content values ↵
    Open discussion wrt details here. [Issue #5715] ↵
    We are still working through the details of this section. If there is any behavior specified here that would cause replaced elements with a preferred aspect ratio to behave differently than they would under the requirements of the CSS2, Flex Layout, and Grid Layout specs combined (without this specification in effect), this is an error and should be reported to the CSSWG. There is a list of open aspect-ratio issues. ↵
    CSS2.1 does not cleanly differentiate between replaced elements vs. elements with an aspect ratio; need to figure out specific cases that are unclear and define them, either in the appropriate Level 3 spec or here. ↵
    When we move all the sizing information here, rather than crowbar-ing our way into 2.1, then the core principle here is just: the resolved preferred size in the ratio-determining axis (before applying min/max) gets transferred thru the ratio. Min/max constraints get transferred afterwards, and then applied to each axis independently without regards to aspect-ratio. ↵
    This section might not be written correctly. [Issue #6071] ↵
    CSS Sizing 3 § 5.1 Intrinsic Sizes ↵
    Do we want to have a way to force an iframe to forget its locked embedded ICB size? Maybe turning frame-sizing off and on again? ↵
    CSS Sizing 3 § 5.2 Intrinsic Contributions ↵
    This property seriously needs some name bikeshedding. ↵
    CSS Sizing 3 § 4 Extrinsic Size Determination ↵
    Copy whatever stretch-fit ends up doing wrt margin collapsing. ↵
    If there is a minimum size in one dimension that would cause overflow of the target rectangle if the aspect ratio were honored, do we honor the aspect ratio or skew the image? If the former, we need a step similar to #2 that applies the relevant minimums. ↵
    ✔MDN
    ✔MDN
    ✔MDN
    ✔MDN
    ✔MDN
    ✔MDN