< css‎ | properties
Jump to: navigation, search


This article is Ready to Use.

W3C Working Draft


Controls whether the last region in a chain displays additional 'overset' content according its default overflow property, or if it displays a fragment of content as if it were flowing into a subsequent region.

Overview table

Initial value auto
Applies to CSS Regions
Inherited No
Media visual
Computed value specified value
Animatable No
CSS Object Model Property regionFragment
Percentages N/A


  • region-fragment: auto
  • region-fragment: break


Region element displays overset content according to its overflow property.

Region element overrides overflow property, displaying whatever fragment of overset content can fit within the region.



  article {
    flow-into: article-flow;
  #region-1, #region-2 {
    flow-from: article-flow;
    region-fragment: break; /* or auto */
    overflow: visible; /* or hidden */




 In the following example, 'region_1' can accommodate the article's gray text, 'region_2' can	accommodate the blue text, and the red	'overset' text does not fit within the region chain:

region fragment.png

Setting region-fragment to break suppresses display of the overset text, as shown in the example at the bottom. Setting region-fragment to its default auto value makes overset content display according to whatever overflow property is defined, as shown in the two examples on the right. Even overflow:hidden may display part of the first line of overset text.

The property only applies to the final element in a region chain that is not large enough to accomodate remaining content. To behave as a 'region', the element's flow-from must specify a named flow, and display content from a corresponding flow-into.

For an overview of CSS Regions, see Using CSS Regions to flow content through a layout.


This property was formerly named region-overflow.

Related specifications

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

See also

External resources