Automatic size for regions

Regions are able to calculate their own dimensions based on the content that flows inside them.

Title in a region with auto-size dimensions

Title in a region with fixed dimensions

Both titles in the boxes above come from the flow called title-flow. Each title is forced to render individually in the region by using region-break-after: always. This aspect allows the regions to calculate the necessary height for their content as seen on the region with the green outline.

The region with the pink outline has an explicit height defined. Because of this, its content is cut off by the fixed dimension.

The algorithm used to compute automatic region dimensions is explained in the CSS Regions W3C specification.