coderef

Size containmentBaseline · Widely available

The contain: size CSS declaration sets an element's dimensions exclusively by its height and width properties, ignoring its contents and descendants. This permits the browser to avoid slower layout calculations.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Mar 14, 2022. Widely available since Sep 14, 2024.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–51Not supported
52+Supportedsince Jul 20, 2016
Current: 155
Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154
Firefox
1–68Not supported
69+Supportedsince Sep 3, 2019
Current: 157
Safari
1–15.3Not supported
15.4+Supportedsince Mar 14, 2022
Current: 27
MobileChrome Android
18–51Not supported
52+Supportedsince Jul 27, 2016
Current: 155
Firefox Android
4–68Not supported
79+Supportedsince Jul 28, 2020
Current: 157
Safari iOS
1–15.3Not supported
15.4+Supportedsince Mar 14, 2022
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN — see the links below.

Feature detection

CSS · check before using
@supports (contain: size) {
  /* styles that rely on contain: size */
}

/* or in JavaScript */
if (CSS.supports("contain", "size")) {
  // use it
}

Specification