regionoversetchange

Summary

Fires on the NamedFlow object when a change in how its content flows through a region chain renders any region empty or overset (overfilled), or that reverses that state.

Overview Table

Synchronous	No
Bubbles	No
Target	[**NamedFlow**](/apis/css-regions/NamedFlow)
Cancelable	Yes
Default action	none

Fires on the [**NamedFlow**](/apis/css-regions/NamedFlow) object when the tail end of content moves from one region to another within a [chain](/css/concepts/region_chain), changing any between a properly filled state and one that is empty or [*overset*](/css/concepts/overset).

Examples

dispatch functions to add or delete regions based on changes to how content flows through a region chain:

document.getNamedFlows().namedItem('main').addEventListener( 'regionoversetchange', modifyFlow ); function modifyFlow(e) { var flow = e.target; if (flow.overset) { appendRegion(flow.name); // custom function } else if (flow.firstEmptyRegionIndex !== -1) { trimRegions(flow.name); // custom function } } 

Notes

The event fires when the regionOverset changes (between fit, overset, and empty) for any region within a region chain. (Compare with the regionfragmentchange event, which fires much more frequently in response to changing content or dimensions.)

Related specifications

CSS Regions Module Level 1

W3C Working Draft

See also

Related articles

Regions

• CSS Regions API

• CSSRegionStyleRule

• NamedFlow

• firstEmptyRegionIndex

• getContent()

• getRegions()

• getRegionsByContent()

• name

• overset

• regionfragmentchange

• regionoversetchange

• NamedFlowCollection

• namedItem()

• Region

• getComputedRegionStyle()

• getRegionFlowRanges()

• regionOverset

• @region

• content fragments

• named flows

• overset content

• regions

• region chains

• break-after

• break-before

• break-inside

• flow-from

• flow-into

External resources

• W3C editor’s draft: CSS Regions Module Level 3
• Adobe Web Standards: CSS Regions
• Adobe Developer’s Network: CSS3 Regions: Rich page layout with HTML and CSS3
• Sample pages