This is the Standard reference for containments.
It follows the authored TeaCSS vocabulary at source revision
fa3709a for package version 0.7.1.
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