= CSS containing block
{c}
A <CSS containing block> is the reference rectangle used by applicable layout rules to determine a box's size and position. Which ancestor establishes it, and which edges define it, depend on the positioning and layout context. It is therefore not simply another name for the immediate parent <DOM element>.<Visual formatting model in CSS 2.2 by W3C>[§9.1.2, containing blocks and establishing boxes]{ref}<Visual formatting model details in CSS 2.2 by W3C>[§10.1, definition of the containing block]{ref}
Consider a horizontal block with `position: relative; width: 300px; padding: 20px; border: 5px solid` and content-box sizing. Its content width is $300$ and its padding-box width is $340$ <CSS pixels>. An ordinary block child whose width is `50%` uses the applicable $300$-pixel content-width reference, giving $150$ pixels. A child with `position: absolute; width: 50%` instead uses this positioned ancestor's padding-box reference, giving $170$ pixels. Assume no intervening ancestor establishes another reference, and no child padding, borders or other size constraints.<Visual formatting model details in CSS 2.2 by W3C>[§10.1, normal-flow and absolutely positioned containing blocks; §10.2, percentage widths]{ref}
The same percentage text thus produces different numbers because its geometric reference changes. This is useful when debugging an apparently wrong width: first identify the actual <CSS containing block>, then apply <CSS box-sizing> and the remaining constraints.
A <CSS containing block> does not automatically confine all descendant painting. Content may extend beyond it; <CSS overflow> and clipping rules are separate. A positioning reference, a clipping boundary and a <DOM tree> parent need not identify the same rectangle or object.
Back to article page
