container-type
Defines an element as a 'container' so its children can query its size or state. 'inline-size' is the most common value, allowing responsive styles based on the container's width.
Quick example
.parent {
/* Turns this element into a container for its children to query */
container-type: inline-size;
}
Quick facts
Initial value
normalInherited
No
Applies to
all elements
Animation type
color
Values
normalsizeinline-sizescroll-state container-type Browser Support
Newly available Since 2023 93% global usage
Since 2023 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
105+
110+
16+
105+