In this example, the divs are not sized by anything so they naturally occupy all available width, and enough width to fit their content.

When 'contain: size' is added, the left-hand-side div does not consider its children for sizing. This means it still takes up all available width, but 0 height. The right-hand-side element, however, starts using contain-intrinsic-size as its intrinsic size, so it still takes up all of the width but sizes the height to its contain-intrinsic-size height.

In this example, the elements's width is sized to max-content. This means that it will use the intrinsic size information when determining the size. However, when size containment is applied, the child information cannot be used.

With size containment, the left hand size element becomes 0 width and 0 height (and its content is laid out with overflow). The right hand side element uses the contain-intrinsic-size and sizes both the width and the height to the specified size.

In this example, the elements are explicitly sized. They have 250px width and 150px height. Size containment has no effect, since the specified size takes priority.

This example demonstrates why this feature is useful. Note that there are enough elements to be scrollable here. It is important to note that in this example, when we add size containment we only do it for off-screen elements (as determined by an intersection observer). To put it differently, when "add 'contain: size'" is pressed, the size containment will start being added and removed automatically based on screen visibility.

Note that on the left hand size, the experience of scrolling is not great, because offscreen elements are 0 sized (with border). However, although the height for contain-intrinsic-size is a rough estimate, the scrolling experience is much better.

Here, the effect is achieved by intersection observer. However, it can also be achieved automatically by simply specifying content-visibility: auto. This example demonstrates how important contain-intrinsic-size is when used with content-visibility: auto.

Note that the experience can be made better with improved estimates of the sizes without the worry of specifying a value that is too large. A large value with height or min-height would have noticeable (and visibly broken to the user) consequences on visible content (assuming the property is added unconditionally). The contain-intrinsic-size property, however, is ignored when size containment is not present.