The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.


< apis‎ | css-regions‎ | Region
Jump to: navigation, search


This article is Ready to Use.

W3C Working Draft


A region's display state within a region chain.

Property of apis/css-regions/Region


Note: This property is read-only.

var regionState = region.;

Return Value

Returns an object of type String

A region's display state within a region chain:

  • overset indicates the region is the last in the chain, and does not have enough room to display remaining content. See region-fragment for display options.
  • empty indicates content was accommodated by previous regions in the chain, or that no content is available to flow into the chain.
  • fit indicates various scenarios:
    • When content appears within the last region in the chain but does not overflow it, as described above in overset
    • For regions that flow content into subsequent regions in the chain
    • For regions that are too small to display the next available item of content, such as an image, which gets pushed into a subsequent region
    • For elements that no longer behave as a region, which occurs when their flow-from property reverts to none


Check if region needs to be deleted or appended:


if (region.regionOverset == 'empty') {
    // delete region?
} else if (region.regionOverset == 'overset') {
    // add additional regions?


Not to be confused with overset, which indicates whether the overall named flow features too few display regions.

Related specifications

Specification Status Related Changes
CSS Regions Module Level 1 W3C Working Draft

See also

Related articles


External resources