This is the Standard reference for containments.
The vocabulary comes from the teacss-ts Storybook at revision
9de266d for package version 0.10.11.
Each value list gives finite examples and named values for its prefixes. A
bracket or variable example demonstrates that open form for the same prefix;
the listed arbitrary literals are samples, not every accepted literal. Check
the Storybook token reference for more examples,
and do not infer support from a different prefix.
contain
Interactive example.
Prefixes: contain. Example: contain:none. It emits contain:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
none, strict, content, size, inline-size, layout, style, paint
content-visibility
Interactive example.
Prefixes: content-vis. Example: content-vis:visible. It emits content-visibility:visible;.
Documented values (3)
visible, hidden, auto
container-type
Interactive example.
Prefixes: container-type. Example: container-type:normal. It emits container-type:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
normal, size, inline-size, scroll-state, [inline-size_scroll-state]
container-name
Interactive example.
Prefixes: container-name. Example: container-name:none. It emits container-name:none;.
Documented values (4)
none, sidebar, main, card
contain-intrinsic-width
Interactive example.
Prefixes: contain-intrinsic-w. Example: contain-intrinsic-w:none. It emits contain-intrinsic-width:none;.
Documented values (5)
none, 1c, 4x, 300px, [auto_300px]
contain-intrinsic-height
Interactive example.
Prefixes: contain-intrinsic-h. Example: contain-intrinsic-h:none. It emits contain-intrinsic-height:none;.
Documented values (5)
none, 1c, 4x, 200px, [auto_200px]
contain-intrinsic-block-size
Interactive example.
Prefixes: contain-intrinsic-block-size. Example: contain-intrinsic-block-size:none. It emits contain-intrinsic-block-size:none;.
Documented values (5)
none, 2c, 3x, 100px, [auto_100px]
contain-intrinsic-inline-size
Interactive example.
Prefixes: contain-intrinsic-inline-size. Example: contain-intrinsic-inline-size:none. It emits contain-intrinsic-inline-size:none;.
Documented values (5)
none, 2c, 3x, 50px, [auto_50px]
min-intrinsic-sizing
Interactive example.
Prefixes: min-intrinsic-sizing. Example: min-intrinsic-sizing:legacy. It emits min-intrinsic-sizing:legacy;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
legacy, zero-if-scroll, zero-if-extrinsic, [zero-if-scroll_zero-if-extrinsic]
interpolate-size
Interactive example.
Prefixes: interpolate-size. Example: interpolate-size:numeric-only. It emits interpolate-size:numeric-only;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (2)
numeric-only, allow-keywords