Inline-size containment
The contain: inline-size CSS declaration prevents the element's inline dimension from being set by the element's contents. This permits the browser to avoid slower layout calculations.
Overview
The contain: inline-size CSS declaration prevents the element's inline dimension from being set by the element's contents. This permits the browser to avoid slower layout calculations.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.contain.inline-size | 105 | 105 | 101 | 16 | 105 | 16 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.container {
contain: inline-size;
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}Live demo
Use cases
Using Inline-size containment
The contain: inline-size CSS declaration prevents the element's inline dimension from being set by the element's contents. This permits the browser to avoid slower layout calculations.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features