contain

Definition

The CSS contain property is used to indicate that an element should be treated as an independent formatting context, so that the element's content and layout do not affect the layout of elements outside of the container. The value of contain limits what the element can do and what outside elements can do to it.

Examples

In this example, the .container class has contain: layout style; set, which indicates that the layout and styling of the contained elements should not affect the layout and styling of outside elements:

.container {
  contain: layout style;
}

In this example, the .container class has contain: strict; set, which means that the layout and styling of contained elements will not affect the layout and styling of outside elements, and also the elements within the container cannot affect the layout or styling of outside elements:

.container {
  contain: strict;
}

In this example, the .container class has contain: size; set, which limits the size of the contained elements from affecting the size of outside elements:

.container {
  contain: size;
}

Values

Best Practices

• Use contain for elements that have complex interactions with their parent or siblings.
• Avoid using contain when not necessary as it can limit the style and layout of the contained elements.
• Use strict sparingly as it can result in unexpected behavior.

Browser Compatibility