CSS Box Sizing Module Level 4
CSS Box Sizing Module Level 4
Editor’s Draft
26 March 2026
More details about this document
This version:
Latest published version:
Previous Versions:
Test Suites:
Feedback:
CSSWG Issues Repository
CSSWG GitHub
Inline In Spec
Editors:
Tab Atkins
Google
Elika J. Etemad / fantasai
Apple
Jen Simmons
Apple
Suggest an Edit for this Spec:
GitHub Editor
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
dynamic-available-size-iframe.html
(live test)
(source)
dynamic-change-inline-size-001.html
(live test)
(source)
dynamic-change-inline-size-002.html
(live test)
(source)
dynamic-change-inline-size-003.html
(live test)
(source)
dynamic-change-inline-size-004.html
(live test)
(source)
frameset-intrinsic-crash.html
(live test)
(source)
inheritance-001.html
(live test)
(source)
inheritance-002.html
(live test)
(source)
min-width-max-width-precedence.html
(live test)
(source)
min-width-max-width-precedence.html
(live test)
(source)
replaced-max-size-saturation.html
(live test)
(source)
responsive-iframe-no-match-element.html
(live test)
(source)
textarea-large-padding-crash.html
(live test)
(source)
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
Add shorthands.
[Issue #820]
3.2.
New Sizing Values: the
stretch
fit-content
, and
contain
keywords
Name:
width
height
min-width
min-height
max-width
max-height
New values:
stretch
fit-content
contain
stretch
Applies
stretch-fit sizing
attempting to match the size of the box’s
margin box
to the size of its
containing block
See
§ 6.1 Stretch-fit Sizing: filling the containing block
Tests
block-height-001.html
(live test)
(source)
flex-line-001.html
(live test)
(source)
flex-line-002.html
(live test)
(source)
flex-line-003.html
(live test)
(source)
flex-line-004.html
(live test)
(source)
flex-line-005.html
(live test)
(source)
min-width-1.html
(live test)
(source)
parsing.html
(live test)
(source)
positioned-non-replaced-1.html
(live test)
(source)
positioned-replaced-1.html
(live test)
(source)
positioned-replaced-2.html
(live test)
(source)
positioned-replaced-3.html
(live test)
(source)
stretch-block-size-001.html
(live test)
(source)
stretch-block-size-002.html
(live test)
(source)
stretch-block-size-003.html
(live test)
(source)
stretch-inline-size-001.html
(live test)
(source)
stretch-inline-size-002.html
(live test)
(source)
stretch-inline-size-003.html
(live test)
(source)
stretch-max-block-size-001.html
(live test)
(source)
stretch-max-inline-size-001.html
(live test)
(source)
stretch-min-block-size-001.html
(live test)
(source)
stretch-min-inline-size-001.html
(live test)
(source)
stretch-quirk-001.html
(live test)
(source)
fit-content
Essentially
fit-content(stretch)
i.e. min(
max-content
, max(
min-content
stretch
)).
Tests
fit-content-block-size-abspos.html
(live test)
(source)
fit-content-block-size-fixedpos.html
(live test)
(source)
fit-content-contribution-001.html
(live test)
(source)
fit-content-min-inline-size.html
(live test)
(source)
fit-content-percentage-padding.html
(live test)
(source)
float-clearance-with-margin-collapse-and-fit-content-and-padding-percentage-001.html
(live test)
(source)
float-clearance-with-margin-collapse-and-fit-content-and-padding-percentage-002.html
(live test)
(source)
float-clearance-with-margin-collapse-and-fit-content-and-padding-percentage-003.html
(live test)
(source)
float-clearance-with-margin-collapse-and-fit-content-and-padding-percentage-004.html
(live test)
(source)
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.2 Contain-fit Sizing: stretching while maintaining an aspect ratio
If the box has no
preferred aspect ratio
applies
stretch-fit sizing
Note:
These new values add to the set of values
that the definition of
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
4.1.
Preferred Aspect Ratios: the
aspect-ratio
property
Name:
aspect-ratio
Value:
auto
||
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
aspect-ratio-interpolation.html
(live test)
(source)
abspos-001.html
(live test)
(source)
abspos-002.html
(live test)
(source)
abspos-003.html
(live test)
(source)
abspos-004.html
(live test)
(source)
abspos-005.html
(live test)
(source)
abspos-006.html
(live test)
(source)
abspos-007.html
(live test)
(source)
abspos-008.html
(live test)
(source)
abspos-009.html
(live test)
(source)
abspos-010.html
(live test)
(source)
abspos-011.html
(live test)
(source)
abspos-012.html
(live test)
(source)
abspos-013.html
(live test)
(source)
abspos-014.html
(live test)
(source)
abspos-015.html
(live test)
(source)
abspos-016.html
(live test)
(source)
abspos-017.html
(live test)
(source)
abspos-018.html
(live test)
(source)
abspos-019.html
(live test)
(source)
abspos-020.html
(live test)
(source)
abspos-021.html
(live test)
(source)
auto-margins-001.html
(live test)
(source)
block-aspect-ratio-001.html
(live test)
(source)
block-aspect-ratio-002.html
(live test)
(source)
block-aspect-ratio-003.html
(live test)
(source)
block-aspect-ratio-004.html
(live test)
(source)
block-aspect-ratio-005.html
(live test)
(source)
block-aspect-ratio-006.html
(live test)
(source)
block-aspect-ratio-007.html
(live test)
(source)
block-aspect-ratio-008.html
(live test)
(source)
block-aspect-ratio-009.html
(live test)
(source)
block-aspect-ratio-010.html
(live test)
(source)
block-aspect-ratio-011.html
(live test)
(source)
block-aspect-ratio-012.html
(live test)
(source)
block-aspect-ratio-013.html
(live test)
(source)
block-aspect-ratio-014.html
(live test)
(source)
block-aspect-ratio-015.html
(live test)
(source)
block-aspect-ratio-016.html
(live test)
(source)
block-aspect-ratio-017.html
(live test)
(source)
block-aspect-ratio-018.html
(live test)
(source)
block-aspect-ratio-019.html
(live test)
(source)
block-aspect-ratio-020.html
(live test)
(source)
block-aspect-ratio-021.html
(live test)
(source)
block-aspect-ratio-022.html
(live test)
(source)
block-aspect-ratio-023.html
(live test)
(source)
block-aspect-ratio-024.html
(live test)
(source)
block-aspect-ratio-025.html
(live test)
(source)
block-aspect-ratio-026.html
(live test)
(source)
block-aspect-ratio-027.html
(live test)
(source)
block-aspect-ratio-028.html
(live test)
(source)
block-aspect-ratio-029-crash.html
(live test)
(source)
block-aspect-ratio-030.html
(live test)
(source)
block-aspect-ratio-031.html
(live test)
(source)
block-aspect-ratio-032.html
(live test)
(source)
block-aspect-ratio-033.html
(live test)
(source)
block-aspect-ratio-034.html
(live test)
(source)
block-aspect-ratio-035.html
(live test)
(source)
block-aspect-ratio-036.html
(live test)
(source)
block-aspect-ratio-037.html
(live test)
(source)
block-aspect-ratio-051-crash.html
(live test)
(source)
block-aspect-ratio-052.html
(live test)
(source)
block-aspect-ratio-053.html
(live test)
(source)
block-aspect-ratio-054.html
(live test)
(source)
block-aspect-ratio-055.html
(live test)
(source)
block-aspect-ratio-056.html
(live test)
(source)
block-aspect-ratio-058.html
(live test)
(source)
block-aspect-ratio-with-margin-collapsing-001.html
(live test)
(source)
block-aspect-ratio-with-margin-collapsing-002.html
(live test)
(source)
box-sizing-dimensions.html
(live test)
(source)
box-sizing-squashed.html
(live test)
(source)
flex-aspect-ratio-001.html
(live test)
(source)
flex-aspect-ratio-003.html
(live test)
(source)
flex-aspect-ratio-005.html
(live test)
(source)
flex-aspect-ratio-006.html
(live test)
(source)
flex-aspect-ratio-007.html
(live test)
(source)
flex-aspect-ratio-008.html
(live test)
(source)
flex-aspect-ratio-009.html
(live test)
(source)
flex-aspect-ratio-010.html
(live test)
(source)
flex-aspect-ratio-011.html
(live test)
(source)
flex-aspect-ratio-012.html
(live test)
(source)
flex-aspect-ratio-013.html
(live test)
(source)
flex-aspect-ratio-014.html
(live test)
(source)
flex-aspect-ratio-015.html
(live test)
(source)
flex-aspect-ratio-016.html
(live test)
(source)
flex-aspect-ratio-017.html
(live test)
(source)
flex-aspect-ratio-018.html
(live test)
(source)
flex-aspect-ratio-019.html
(live test)
(source)
flex-aspect-ratio-020.html
(live test)
(source)
flex-aspect-ratio-021.html
(live test)
(source)
flex-aspect-ratio-022.html
(live test)
(source)
flex-aspect-ratio-023.html
(live test)
(source)
flex-aspect-ratio-024.html
(live test)
(source)
flex-aspect-ratio-027.html
(live test)
(source)
flex-aspect-ratio-028.html
(live test)
(source)
flex-aspect-ratio-029.html
(live test)
(source)
flex-aspect-ratio-030.html
(live test)
(source)
flex-aspect-ratio-032.html
(live test)
(source)
flex-aspect-ratio-033.html
(live test)
(source)
flex-aspect-ratio-034.html
(live test)
(source)
flex-aspect-ratio-035.html
(live test)
(source)
flex-aspect-ratio-036.html
(live test)
(source)
flex-aspect-ratio-037.html
(live test)
(source)
flex-aspect-ratio-038.html
(live test)
(source)
flex-aspect-ratio-045.html
(live test)
(source)
flex-aspect-ratio-046.html
(live test)
(source)
flex-aspect-ratio-047.html
(live test)
(source)
flex-aspect-ratio-048.html
(live test)
(source)
flex-aspect-ratio-049.html
(live test)
(source)
flex-aspect-ratio-050.html
(live test)
(source)
flex-aspect-ratio-051.html
(live test)
(source)
flex-aspect-ratio-052.html
(live test)
(source)
flex-aspect-ratio-053.html
(live test)
(source)
flex-aspect-ratio-054.html
(live test)
(source)
flex-aspect-ratio-055.html
(live test)
(source)
floats-aspect-ratio-001.html
(live test)
(source)
fractional-aspect-ratio.html
(live test)
(source)
grid-aspect-ratio-001.html
(live test)
(source)
grid-aspect-ratio-002.html
(live test)
(source)
grid-aspect-ratio-003.html
(live test)
(source)
grid-aspect-ratio-004.html
(live test)
(source)
grid-aspect-ratio-005.html
(live test)
(source)
grid-aspect-ratio-006.html
(live test)
(source)
grid-aspect-ratio-007.html
(live test)
(source)
grid-aspect-ratio-008.html
(live test)
(source)
grid-aspect-ratio-009.html
(live test)
(source)
grid-aspect-ratio-010.html
(live test)
(source)
grid-aspect-ratio-011.html
(live test)
(source)
grid-aspect-ratio-012.html
(live test)
(source)
grid-aspect-ratio-014.html
(live test)
(source)
grid-aspect-ratio-015.html
(live test)
(source)
grid-aspect-ratio-016.html
(live test)
(source)
grid-aspect-ratio-017.html
(live test)
(source)
grid-aspect-ratio-018.html
(live test)
(source)
grid-aspect-ratio-019.html
(live test)
(source)
grid-aspect-ratio-020.html
(live test)
(source)
grid-aspect-ratio-021.html
(live test)
(source)
grid-aspect-ratio-022.html
(live test)
(source)
grid-aspect-ratio-023.html
(live test)
(source)
grid-aspect-ratio-024.html
(live test)
(source)
grid-aspect-ratio-025.html
(live test)
(source)
grid-aspect-ratio-026.html
(live test)
(source)
grid-aspect-ratio-027.html
(live test)
(source)
grid-aspect-ratio-028.html
(live test)
(source)
grid-aspect-ratio-029.html
(live test)
(source)
grid-aspect-ratio-030.html
(live test)
(source)
grid-aspect-ratio-031.html
(live test)
(source)
grid-aspect-ratio-032.html
(live test)
(source)
grid-aspect-ratio-033.html
(live test)
(source)
grid-aspect-ratio-034.html
(live test)
(source)
grid-aspect-ratio-035.html
(live test)
(source)
grid-aspect-ratio-036.html
(live test)
(source)
grid-aspect-ratio-037.html
(live test)
(source)
grid-aspect-ratio-038.html
(live test)
(source)
grid-aspect-ratio-040.html
(live test)
(source)
grid-aspect-ratio-041.html
(live test)
(source)
inheritance.html
(live test)
(source)
intrinsic-size-001.html
(live test)
(source)
intrinsic-size-002.html
(live test)
(source)
intrinsic-size-003.html
(live test)
(source)
intrinsic-size-004.html
(live test)
(source)
intrinsic-size-005.html
(live test)
(source)
intrinsic-size-006.html
(live test)
(source)
intrinsic-size-007.html
(live test)
(source)
intrinsic-size-008.html
(live test)
(source)
intrinsic-size-009.html
(live test)
(source)
intrinsic-size-011.html
(live test)
(source)
intrinsic-size-012.html
(live test)
(source)
intrinsic-size-013.html
(live test)
(source)
intrinsic-size-014.html
(live test)
(source)
intrinsic-size-015.html
(live test)
(source)
intrinsic-size-016.html
(live test)
(source)
intrinsic-size-017.html
(live test)
(source)
intrinsic-size-018.html
(live test)
(source)
intrinsic-size-019.html
(live test)
(source)
intrinsic-size-020.html
(live test)
(source)
intrinsic-size-021.html
(live test)
(source)
intrinsic-size-022.html
(live test)
(source)
intrinsic-size-023.html
(live test)
(source)
intrinsic-size-024.html
(live test)
(source)
intrinsic-size-025.html
(live test)
(source)
large-aspect-ratio-crash.html
(live test)
(source)
aspect-ratio-computed.html
(live test)
(source)
aspect-ratio-invalid.html
(live test)
(source)
aspect-ratio-valid.html
(live test)
(source)
percentage-resolution-001.html
(live test)
(source)
percentage-resolution-002.html
(live test)
(source)
percentage-resolution-003.html
(live test)
(source)
percentage-resolution-004.html
(live test)
(source)
percentage-resolution-005.html
(live test)
(source)
quirks-mode-001.html
(live test)
(source)
quirks-mode-002.html
(live test)
(source)
quirks-mode-003.html
(live test)
(source)
replaced-element-001.html
(live test)
(source)
replaced-element-002.html
(live test)
(source)
replaced-element-003.html
(live test)
(source)
replaced-element-004.html
(live test)
(source)
replaced-element-005.html
(live test)
(source)
replaced-element-006.html
(live test)
(source)
replaced-element-007.html
(live test)
(source)
replaced-element-008.html
(live test)
(source)
replaced-element-009.html
(live test)
(source)
replaced-element-010.html
(live test)
(source)
replaced-element-011.html
(live test)
(source)
replaced-element-012.html
(live test)
(source)
replaced-element-013.html
(live test)
(source)
replaced-element-014.html
(live test)
(source)
replaced-element-015.html
(live test)
(source)
replaced-element-016.html
(live test)
(source)
replaced-element-017.html
(live test)
(source)
replaced-element-018.html
(live test)
(source)
replaced-element-019.html
(live test)
(source)
replaced-element-020.html
(live test)
(source)
replaced-element-021.html
(live test)
(source)
replaced-element-022.html
(live test)
(source)
replaced-element-023.html
(live test)
(source)
replaced-element-024.html
(live test)
(source)
replaced-element-025.html
(live test)
(source)
replaced-element-026.html
(live test)
(source)
replaced-element-027.html
(live test)
(source)
replaced-element-028.html
(live test)
(source)
replaced-element-029.html
(live test)
(source)
replaced-element-030.html
(live test)
(source)
replaced-element-031.html
(live test)
(source)
replaced-element-034.html
(live test)
(source)
replaced-element-035.html
(live test)
(source)
replaced-element-036.html
(live test)
(source)
replaced-element-037.html
(live test)
(source)
replaced-element-042.html
(live test)
(source)
replaced-element-045.html
(live test)
(source)
replaced-element-046.html
(live test)
(source)
replaced-element-049.html
(live test)
(source)
replaced-element-dynamic-aspect-ratio.html
(live test)
(source)
select-element-001.html
(live test)
(source)
sign-function-aspect-ratio.html
(live test)
(source)
small-aspect-ratio-crash.html
(live test)
(source)
table-element-001.html
(live test)
(source)
zero-or-infinity-001.html
(live test)
(source)
zero-or-infinity-002.html
(live test)
(source)
zero-or-infinity-003.html
(live test)
(source)
zero-or-infinity-004.html
(live test)
(source)
zero-or-infinity-005.html
(live test)
(source)
zero-or-infinity-006.html
(live test)
(source)
zero-or-infinity-007.html
(live test)
(source)
zero-or-infinity-008.html
(live test)
(source)
zero-or-infinity-009.html
(live test)
(source)
zero-or-infinity-010.html
(live test)
(source)
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.
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
is
degenerate
the property instead behaves as
auto
auto &&
If both
auto
and a
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
is
degenerate
the property instead behaves as
auto
Tests
block-aspect-ratio-050.html
(live test)
(source)
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
12
em
fr
));
li
aspect-ratio
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
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
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:
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
flex-aspect-ratio-031.html
(live test)
(source)
grid-aspect-ratio-align-items-center.html
(live test)
(source)
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
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
/* '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
+----------+ +----------+ +----------+
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~^|
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| ~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| | | ~~~ | | ~~~~~~~~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
min-height
+----------+ +----------+ +----------+
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| ~~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| ~~~~~~~ | | ~~~~~~~~ | | ~~~~~~~~ |
| | | ~~~ | | ~~~~~~~~ |
+----------+ +----------+ +-~~~~~~~~-+
~~~~~~
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
block-aspect-ratio-038.html
(live test)
(source)
block-aspect-ratio-039.html
(live test)
(source)
fieldset-element-001.html
(live test)
(source)
fieldset-element-002.html
(live test)
(source)
flex-aspect-ratio-002.html
(live test)
(source)
flex-aspect-ratio-004.html
(live test)
(source)
flex-aspect-ratio-025.html
(live test)
(source)
flex-aspect-ratio-026.html
(live test)
(source)
flex-aspect-ratio-040.html
(live test)
(source)
flex-aspect-ratio-041.html
(live test)
(source)
flex-aspect-ratio-042.html
(live test)
(source)
flex-aspect-ratio-043.html
(live test)
(source)
flex-aspect-ratio-044.html
(live test)
(source)
grid-aspect-ratio-039.html
(live test)
(source)
grid-aspect-ratio-042.html
(live test)
(source)
intrinsic-size-010.html
(live test)
(source)
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
replaced-element-032.html
(live test)
(source)
replaced-element-033.html
(live test)
(source)
block-aspect-ratio-040.html
(live test)
(source)
block-aspect-ratio-041.html
(live test)
(source)
block-aspect-ratio-042.html
(live test)
(source)
block-aspect-ratio-043.html
(live test)
(source)
block-aspect-ratio-044.html
(live test)
(source)
block-aspect-ratio-045.html
(live test)
(source)
block-aspect-ratio-046.html
(live test)
(source)
block-aspect-ratio-047.html
(live test)
(source)
block-aspect-ratio-048.html
(live test)
(source)
block-aspect-ratio-049.html
(live test)
(source)
flex-aspect-ratio-039.html
(live test)
(source)
replaced-element-039.html
(live test)
(source)
replaced-element-040.html
(live test)
(source)
replaced-element-041.html
(live test)
(source)
replaced-element-043.html
(live test)
(source)
replaced-element-044.html
(live test)
(source)
image-max-width-and-height-behaves-as-auto.html
(live test)
(source)
min-max-content-orthogonal-flow-crash-001.html
(live test)
(source)
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
Initial:
none
Applies to:
elements with
size containment
Inherited:
no
Percentages:
n/a
Computed value:
as specified, with
values computed
Canonical order:
per grammar
Animation type:
by computed value type
Logical property group:
contain-intrinsic-size
Tests
auto-014.html
(live test)
(source)
auto-015.html
(live test)
(source)
auto-016.html
(live test)
(source)
auto-017.html
(live test)
(source)
auto-018.html
(live test)
(source)
contain-intrinsic-size-001.html
(live test)
(source)
contain-intrinsic-size-002.html
(live test)
(source)
contain-intrinsic-size-003.html
(live test)
(source)
contain-intrinsic-size-004.html
(live test)
(source)
contain-intrinsic-size-005.html
(live test)
(source)
contain-intrinsic-size-006.html
(live test)
(source)
contain-intrinsic-size-007.html
(live test)
(source)
contain-intrinsic-size-008.html
(live test)
(source)
contain-intrinsic-size-009.html
(live test)
(source)
contain-intrinsic-size-010.html
(live test)
(source)
contain-intrinsic-size-011.html
(live test)
(source)
contain-intrinsic-size-012.html
(live test)
(source)
contain-intrinsic-size-013.html
(live test)
(source)
contain-intrinsic-size-014.html
(live test)
(source)
contain-intrinsic-size-015.html
(live test)
(source)
contain-intrinsic-size-016.html
(live test)
(source)
contain-intrinsic-size-017.html
(live test)
(source)
contain-intrinsic-size-018.html
(live test)
(source)
contain-intrinsic-size-019.html
(live test)
(source)
contain-intrinsic-size-020.html
(live test)
(source)
contain-intrinsic-size-021.html
(live test)
(source)
contain-intrinsic-size-022.html
(live test)
(source)
contain-intrinsic-size-023.html
(live test)
(source)
contain-intrinsic-size-024.html
(live test)
(source)
contain-intrinsic-size-025.html
(live test)
(source)
contain-intrinsic-size-026.html
(live test)
(source)
contain-intrinsic-size-027.html
(live test)
(source)
contain-intrinsic-size-028.html
(live test)
(source)
contain-intrinsic-size-029.html
(live test)
(source)
contain-intrinsic-size-030.html
(live test)
(source)
contain-intrinsic-size-031.html
(live test)
(source)
contain-intrinsic-size-032.html
(live test)
(source)
contain-intrinsic-size-logical-001.html
(live test)
(source)
contain-intrinsic-size-logical-002.html
(live test)
(source)
contain-intrinsic-size-logical-003.html
(live test)
(source)
forget-on-disconnect-in-iframe.html
(live test)
(source)
contain-intrinsic-size-computed.html
(live test)
(source)
contain-intrinsic-size-invalid.html
(live test)
(source)
contain-intrinsic-size-valid.html
(live test)
(source)
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
contain-intrinsic-size-033.html
(live test)
(source)
none
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
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
content-visibility-058.html
(live test)
(source)
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
] ]
{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-interpolation.html
(live test)
(source)
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:
At the time that
ResizeObserver
events are determined and delivered,
if an element has a
auto
keyword in
contain-intrinsic-size
property,
is capable of being a
ResizeObserver
target,
but does not have
size containment
record the current inner dimensions of its
principal box
as its
last remembered size
At the time that
ResizeObserver
events are determined and delivered,
if an element has a
last remembered size
but does
not
have
auto
keyword in
contain-intrinsic-size
property,
remove its
last remembered size
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
auto-001.html
(live test)
(source)
auto-002.html
(live test)
(source)
auto-003.html
(live test)
(source)
auto-004.html
(live test)
(source)
auto-005.html
(live test)
(source)
auto-006.html
(live test)
(source)
auto-007.html
(live test)
(source)
auto-008.html
(live test)
(source)
auto-009.html
(live test)
(source)
auto-010.html
(live test)
(source)
auto-011.html
(live test)
(source)
auto-012.html
(live test)
(source)
auto-013.html
(live test)
(source)
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
100
px
100
px
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
§ 4 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
100
px
100
px
height
50
px
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:
iframe
elements
Inherited:
no
Percentages:
n/a
Computed value:
specified keyword
Canonical order:
per grammar
Animation type:
discrete
Some
replaced elements
can contain "normal" flowed content,
such as HTML
iframe
s.
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
Which elements 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
element.
The first instance of this meta tag added by the parser can make it opt in.
If the parser encounters multiple such tags, only the first one is used.
If the parser closes the
without seeing the tag,
it is frozen as not-set.
An
iframe
initially doesn’t have an
internal layout intrinsic size
When an
iframe
’s internal document is loaded,
if the required
meta
element is present,
the
iframe
’s
internal layout intrinsic size
’s height or width
is set to the
natural size
of the embedded document as specified by
frame-sizing
Resizing occurs at the
DOMContentLoaded
and
load
events.
Subsequent changes to content, styling or layout of the embedded document
do not affect the
internal layout intrinsic size
When laying out the
iframe
’s internal document,
its initial containing block size is locked to
the size at the time of its first layout,
to mitigate the risks of layout loops and information leaks.
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()
if the document has the required
meta
element
at the time of parsing as described above,
its
internal layout intrinsic size
is updated to its new current
natural size
Note:
If the required
meta
element is not present,
the call throws a
NotAllowedError
DOMException
instead.
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
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-size
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
6.
Extrinsic Size Determination
CSS Sizing 3
§ 4 Extrinsic Size Determination
6.1.
Stretch-fit Sizing: filling the containing block
Stretch-fit sizing tries to set the box’s used size
to the length necessary
to make its
principal box
’s
outer size
as close to filling the
containing block
as possible
while still respecting the constraints imposed by
min-height
min-width
max-height
max-width
If used in an axis where the relevant
self-alignment property
applies to the element
Typically produces the same size that would be obtained
by the
self-alignment property
in that axis
being set to
stretch
and all
sizing properties
and
aspect-ratio
being set to their initial values.
Note:
In
multi-line
flex layout
the
stretch-fit size
resolves against the
containing block
and contributes that size to the
cross size
of the line—whereas
stretch
contributes the
fit-content size
—before finally resolving against the
cross size
of the line.
Otherwise, if used in an axis where percentage sizes can resolve to a
definite
value
Behaves as
100%
except it sizes the
margin box
regardless of the value of
box-sizing
If this is a
block axis
size,
and the element is in a Block Layout
formatting context
and the parent element does not have a
block-start
border
or
padding
and is not an
independent formatting context
treat the element’s
block-start
margin as zero
for the purpose of calculating this size.
Do the same for the
block-end
margin.
Note:
This simulates the effect of margins collapsing with the parent’s margin.
It doesn’t actually suppress the margins,
so if anything prevents the element from actually collapsing with its parent,
the
stretch-fit size
might actually be too large
to fit in the parent perfectly.
Otherwise
In a
preferred size property
behaves as auto
In a
min size property
behaves as
In a
max size property
behaves as
none
For example, given the following HTML representing two
block boxes
In the following case,
the
outer height
of the child box
will exactly match the height of the parent box (200px),
but its
inner height
will be 20px less, to account for its margins.
.parent { height: 200px; border: solid; }
.child { height: stretch; margin: 10px; }
On the other hand,
in this case we can assume that the child’s margins will collapse with the parent,
so the inner box will be
200px
tall,
exactly filling the parent.
.outer { height: 200px; margin: 0; }
.inner { height: stretch; margin: 10px; }
(The top margins will in fact collapse,
but the bottom margins do not collapse,
because the bottom margin of a box is not adjoining
to the bottom margin of a parent with a non-
auto
height,
see
CSS 2
§ 8.3.1 Collapsing margins
Luckily, an overflowing bottom margin doesn’t have any visible effect.)
Similarly,
width: stretch
causes the box to fill its container,
being 20px narrower than the width of "some more text"
(due to the 10px margin):
some more text
.parent { float: left; margin: 0; }
.child { width: stretch; margin: 10px; }
On the other hand,
in this example the container’s height is indefinite,
which would cause a percentage height on the child to
behave as auto
so
height: stretch
behaves as auto
as well.
.parent { height: auto; margin: 0; }
.child { height: stretch; margin: 10px; }
Tests
abspos-1.html
(live test)
(source)
abspos-2.html
(live test)
(source)
aspect-ratio-1.html
(live test)
(source)
aspect-ratio-2.html
(live test)
(source)
auto-margins-1.html
(live test)
(source)
auto-margins-2.html
(live test)
(source)
bfc-next-to-float-1.html
(live test)
(source)
bfc-next-to-float-2.html
(live test)
(source)
block-height-002.html
(live test)
(source)
block-height-003.html
(live test)
(source)
block-height-004.html
(live test)
(source)
block-height-005.html
(live test)
(source)
block-height-006.html
(live test)
(source)
block-height-007.html
(live test)
(source)
block-height-008.html
(live test)
(source)
block-height-009.html
(live test)
(source)
block-height-010.html
(live test)
(source)
cache-miss-001.html
(live test)
(source)
cache-miss-002.html
(live test)
(source)
content-contribution-001.html
(live test)
(source)
fixed-table-1.html
(live test)
(source)
flex-basis-1.html
(live test)
(source)
flexbox-auto-minimum-001.html
(live test)
(source)
flexbox-auto-minimum-002.html
(live test)
(source)
flexbox-flex-base-size-001.html
(live test)
(source)
flexbox-flex-base-size-002.html
(live test)
(source)
flexbox-stretch-minimum-001.html
(live test)
(source)
flexbox-stretch-minimum-002.html
(live test)
(source)
indefinite-1.html
(live test)
(source)
indefinite-2.html
(live test)
(source)
indefinite-3.html
(live test)
(source)
indefinite-4.html
(live test)
(source)
replaced-next-to-float-1.html
(live test)
(source)
replaced-next-to-float-2.html
(live test)
(source)
stretch-table-001.html
(live test)
(source)
6.2.
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:
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
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
.)
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.3.
Percentage Sizing
Changes
Changes since 5 May 2021 Working Draft
Significant changes since the
5 May 2021 Working Draft
include:
Disallowed re-ordering of values in
contain-intrinsic-size
Issue 6391
).
Only used the last remembered size for the
auto
value of the
contain-intrinsic-*
properties
when the element is skipping its contents to avoid phantom sizes.
Issue 6308
).
Added logical property group for
contain-intrinsic-size
properties.
Issue 2822
).
Changed syntax of
contain-intrinsic-size
to allow for more flexible combinations of values.
Issue 8407
).
Added
calc-size()
to the
width
height
min-width
min-height
max-width
, and
max-height
properties.
Issue 6265
).
Changed definition of
stretch-fit sizing
Issue 11044
).
Disallowed negative lengths in
contain-intrinsic-*
properties.
Issue 11945
).
Added
responsively-sized iframes
via 'contain-intrinsic-size/from-element' value.
Issue 1771
).
Clarified that Flexbox’s
stretch-fit sizing
behavior is slightly different from
stretch
Issue 11784
).
Added Web Platform Tests coverage.
Changes since 20 October 2020 Working Draft
Significant changes since the
20 October 2020 Working Draft
include:
Drafted
min-intrinsic-sizing
property,
to better control the min-content contributions of scroll containers.
Issue 1865
Issue 4585
Added longhands to
contain-intrinsic-size
for controlling each axis independently.
Issue 5432
Drafted
auto
value to
contain-intrinsic-size
to allow “remembering” the previously-calculated size.
Issue 5668
Issue 5815
Defined handling of degenerate ratios in
aspect-ratio
Issue 5557
Defined how
aspect-ratio
impacts a replaced element’s natural sizes.
Issue 5306
Fixed some errors in the
§ 4.4 Min/Max Size Transfers
section,
aligning the behavior to not conflict with behavior defined by CSS2 / CSS Flex Layout / etc.
Issue 6071
Added
contain-intrinsic-size: auto none
syntax.
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
Added
stretch
fit-content
, and
contain
keywords for sizing properties.
Added
aspect-ratio
property.
Added
contain-intrinsic-width
contain-intrinsic-height
contain-intrinsic-block-size
, and
contain-intrinsic-inline-size
properties
and their shorthand
contain-intrinsic-size
Added
min-intrinsic-sizing
property.
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
, 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
CSS
style sheet
renderer
UA
that interprets the semantics of a style sheet and renders
documents that use them.
authoring tool
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
Questions should be directed to the
public-css-testsuite@w3.org
mailing list.
Index
Terms defined by this specification
aspect-ratio
, in § 4.1
auto
value for aspect-ratio
, in § 4.1
value for contain-intrinsic-width, contain-intrinsic-height, contain-intrinsic-block-size, contain-intrinsic-inline-size, contain-intrinsic-size
, in § 5.2
auto &&
, in § 4.1
contain
, in § 3.2
contain-fit sizing
, in § 6.1
contain-intrinsic-block-size
, in § 5.2
contain-intrinsic-height
, in § 5.2
contain-intrinsic-inline-size
, in § 5.2
contain-intrinsic-size
, in § 5.2
contain-intrinsic-width
, in § 5.2
explicit intrinsic inner size
, in § 5.2
fit-content
, in § 3.2
frame-sizing
, in § 5.3
internal layout intrinsic size
, in § 5.3
last remembered size
, in § 5.2
legacy
, in § 5.5
, in § 5.2
min-intrinsic-sizing
, in § 5.5
none
, in § 5.2
preferred aspect ratio
, in § 4.1
, in § 4.1
ratio-dependent axis
, in § 4.2
ratio-determining axis
, in § 4.2
responsively-sized iframe
, in § 5.2.2
stretch
, in § 3.2
zero-if-extrinsic
, in § 5.5
zero-if-scroll
, in § 5.5
Terms defined by reference
[CSS-ALIGN-3]
defines the following terms:
justify-self
self-alignment properties
start
stretch
(for align-self)
stretch
(for justify-self)
[CSS-BACKGROUNDS-3]
defines the following terms:
background-size
[CSS-BORDERS-4]
defines the following terms:
border
[CSS-BOX-4]
defines the following terms:
content box
margin box
padding
[CSS-CASCADE-5]
defines the following terms:
computed value
[CSS-CONTAIN-2]
defines the following terms:
content-visibility
size containment
skipping its contents
[CSS-DISPLAY-4]
defines the following terms:
block box
containing block
display
formatting context
in-flow
independent formatting context
inline box
non-replaced
principal box
replaced element
[CSS-FLEXBOX-1]
defines the following terms:
cross size
flex layout
multi-line flex container
[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-POSITION-3]
defines the following terms:
absolutely-positioned
[CSS-SIZING-3]
defines the following terms:
auto
automatic minimum size
automatic size
behave as auto
behaves as auto
box-sizing
definite
extrinsic sizing
fit-content size
height
indefinite
inner height
intrinsic size contribution
max size property
max-content
maximum size
min size property
min-content
min-content contribution
min-content size
minimum size
none
outer height
outer size
preferred size
preferred size property
sizing property
stretch-fit size
width
[CSS-VALUES-4]
defines the following terms:
CSS-wide keywords
degenerate ratio
{A,B}
||
[CSS-VALUES-5]
defines the following terms:
calc-size()
[CSS-WRITING-MODES-4]
defines the following terms:
block axis
block-end
block-start
[CSS2]
defines the following terms:
document language
max-height
max-width
min-height
min-width
[HTML]
defines the following terms:
iframe
meta
[RESIZE-OBSERVER-1]
defines the following terms:
ResizeObserver
[WEBIDL]
defines the following terms:
DOMException
NotAllowedError
References
Normative References
[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr..
CSS Box Alignment Module Level 3
. URL:
[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper.
CSS Backgrounds and Borders Module Level 3
. URL:
[CSS-BORDERS-4]
Elika Etemad; et al.
CSS Borders and Box Decorations Module Level 4
. URL:
[CSS-BOX-4]
Elika Etemad.
CSS Box Model Module Level 4
. URL:
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr..
CSS Cascading and Inheritance Level 5
. URL:
[CSS-CONTAIN-1]
Tab Atkins Jr.; Florian Rivoal.
CSS Containment Module Level 1
. URL:
[CSS-CONTAIN-2]
Tab Atkins Jr.; Florian Rivoal; Vladimir Levin.
CSS Containment Module Level 2
. URL:
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr..
CSS Display Module Level 4
. URL:
[CSS-IMAGES-3]
Tab Atkins Jr.; Elika Etemad; Lea Verou.
CSS Images Module Level 3
. URL:
[CSS-IMAGES-4]
Elika Etemad; Tab Atkins Jr.; Lea Verou.
CSS Images Module Level 4
. URL:
[CSS-LOGICAL-1]
Elika Etemad; Rossen Atanassov.
CSS Logical Properties and Values Module Level 1
. URL:
[CSS-MULTICOL-2]
Florian Rivoal; Rachel Andrew.
CSS Multi-column Layout Module Level 2
. URL:
[CSS-OVERFLOW-3]
Elika Etemad; Florian Rivoal.
CSS Overflow Module Level 3
. URL:
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad.
CSS Box Sizing Module Level 3
. URL:
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 3
. URL:
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad.
CSS Values and Units Module Level 4
. URL:
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii.
CSS Writing Modes Level 4
. URL:
[CSS2]
Bert Bos; et al.
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
. URL:
[CSS3COL]
Florian Rivoal; Rachel Andrew.
CSS Multi-column Layout Module Level 1
. URL:
[HTML]
Anne van Kesteren; et al.
HTML Standard
. Living Standard. URL:
[RESIZE-OBSERVER-1]
Aleks Totic; Greg Whitworth.
Resize Observer
. URL:
[RFC2119]
S. Bradner.
Key words for use in RFCs to Indicate Requirement Levels
. March 1997. Best Current Practice. URL:
Non-Normative References
[CSS-FLEXBOX-1]
Elika Etemad; Tab Atkins Jr.; Rossen Atanassov.
CSS Flexible Box Layout Module Level 1
. URL:
[CSS-GRID-2]
Tab Atkins Jr.; et al.
CSS Grid Layout Module Level 2
. URL:
[CSS-POSITION-3]
Elika Etemad; Tab Atkins Jr..
CSS Positioned Layout Module Level 3
. URL:
[CSS-VALUES-5]
Tab Atkins Jr.; Elika Etemad; Miriam Suzanne.
CSS Values and Units Module Level 5
. URL:
[WEBIDL]
Edgar Chen; Timothy Gu.
Web IDL Standard
. Living Standard. URL:
Property Index
Name
Value
Initial
Applies to
Inh.
%ages
Animation type
Canonical order
Computed value
Logical property group
aspect-ratio
auto ||
auto
all elements except inline boxes and internal ruby or table boxes
no
n/a
by computed value
per grammar
specified keyword or a pair of numbers
contain-intrinsic-block-size
auto? [ none |
none
elements with size containment
no
n/a
by computed value type
per grammar
as specified, with
contain-intrinsic-size
contain-intrinsic-height
auto? [ none |
none
elements with size containment
no
n/a
by computed value type
per grammar
as specified, with
contain-intrinsic-size
contain-intrinsic-inline-size
auto? [ none |
none
elements with size containment
no
n/a
by computed value type
per grammar
as specified, with
contain-intrinsic-size
contain-intrinsic-size
[ auto? [ none |
see individual properties
see individual properties
see individual properties
see individual properties
see individual properties
per grammar
see individual properties
contain-intrinsic-width
auto? [ none |
none
elements with size containment
no
n/a
by computed value type
per grammar
as specified, with
contain-intrinsic-size
frame-sizing
auto | content-width | content-height | content-block-size | content-inline-size
auto
iframe elements
no
n/a
discrete
per grammar
specified keyword
min-intrinsic-sizing
legacy | zero-if-scroll || zero-if-extrinsic
legacy
all elements except inline boxes
no
n/a
discrete
per grammar
as specified
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
Add shorthands.
[Issue #820]
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
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
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
aspect-ratio
In all current engines.
Firefox
89+
Safari
15+
Chrome
88+
Opera
Edge
88+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
contain-intrinsic-height
In all current engines.
Firefox
107+
Safari
17+
Chrome
95+
Opera
Edge
95+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
contain-intrinsic-size
In all current engines.
Firefox
107+
Safari
17+
Chrome
83+
Opera
Edge
83+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
contain-intrinsic-width
In all current engines.
Firefox
107+
Safari
17+
Chrome
95+
Opera
Edge
95+
Edge (Legacy)
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
MDN
fit-content
In all current engines.
Firefox
94+
Safari
10.1+
Chrome
57+
Opera
Edge
79+
Edge (Legacy)
16+
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
6.0+
Opera Mobile
fit-content
In all current engines.
Firefox
94+
Safari
10.1+
Chrome
57+
Opera
Edge
79+
Edge (Legacy)
16+
IE
None
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
6.0+
Opera Mobile
MDN
max-height
In all current engines.
Firefox
1+
Safari
1.3+
Chrome
18+
Opera
7+
Edge
79+
Edge (Legacy)
12+
IE
7+
Firefox for Android
4+
iOS Safari
Chrome for Android
Android WebView
37+
Samsung Internet
Opera Mobile
max-width
In all current engines.
Firefox
1+
Safari
1+
Chrome
1+
Opera
4+
Edge
79+
Edge (Legacy)
12+
IE
7+
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
width
In all current engines.
Firefox
1+
Safari
1+
Chrome
1+
Opera
3.5+
Edge
79+
Edge (Legacy)
12+
IE
4+
Firefox for Android
iOS Safari
Chrome for Android
Android WebView
Samsung Internet
Opera Mobile
10.1+
US
CSS Box Sizing Module Level 4
text
text