overset content

Summary

Refers to a situation in which the final region of a region chain is unable to fully display remaining content of a named flow.

The CSS Regions feature allows content to flow dynamically through a series of presentational block elements, known as regions, allowing for complex magazine-style layouts. This region chain may not have enough room to accommodate all the content. In that case, illustrated below as Scenario #2, the final region is in an overset state, as is the named flow that contains all the content.

Depending on its region-fragment property, the final region’s content may appear as a fragment, breaking cleanly as if there were subsequent regions in the chain into which content could flow. Otherwise it may simply overflow the final element: either clipping, spilling, or scrolling past the element’s dimensions as specified by the region’s overflow property.

There are two ways to programatically detect overset state:

From the content side, if the named flow’s overset property is true, it means that it doesn’t fully display within the region chain, or that it has not been placed within any regions.
On the presentation side, if the final region element’s regionOverset property is overset, some of its content can flow into another region if available.

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

Examples

The following example defines a set of content and a region chain into which to present it. Resulting layout scenarios are illustrated in subsequent examples:



<style>
article.content { flow-into: main;}
section.layout > div { flow-from: main; }
</style>

<!-- CONTENT -->

<article class="content">
  <p>Content #1</p>
  <p>Content #2</p>
  ...
  <p>Content #n</p>
  <p>Final Content</p>
</article>

<!-- LAYOUT -->

<section class="layout">
  <div>Region #1</div>
  <div>Region #2</div>
  <div>Region #3</div>
  <div>Region #4</div>
</section>

Scenario #1: If the region provides enough area, the final content element appears within the final region. The final div element’s regionOverset property returns fit. Note that this is not valid DOM structure, and simply illustrates how content fragments flow dynamically within the region chain.



<section class="layout">
  <div>
            <article class="content">
              <p>Content #1</p>
              <p>Content...
  </div>
  <div>
              ...#2</p>
  </div>
  <div>
              ...
              <p>Content #n</p>
  </div>
  <div>
              <p>Final Content</p>
             </article>
  </div>
</section>

Scenario #2: This shows the same situation, but with not enough area in the region chain to display overset content. The final div element’s regionOverset property returns overset. The named flow’s overset property likewise returns true.



<section class="layout">
  <div>
            <article class="content">
              <p>Content #1</p>
              <p>Content...
  </div>
  <div>
              ...#2</p>
  </div>
  <div>
              ...
  </div>
  <div>
              <p>Content #n</p>
  </div>
</section>

<!-- OVERSET CONTENT, DOES NOT DISPLAY:
              <p>Final Content</p>
             </article>
-->

Scenario #3: In this example, there is not enough content to fill the region chain. The final div element’s regionOverset property returns empty.



<section class="layout">
  <div>
            <article class="content">
              <p>Content #1</p>
              <p>Content...
  </div>
  <div>
              ...#2</p>
              ...
              <p>Content #n</p>
  </div>
  <div>
              <p>Final Content</p>
             </article>
  </div>
  <div>
              <!-- EMPTY REGION -->
  </div>
</section>

Related specifications

CSS Regions Module Level 1: W3C Working Draft

overset content

Summary

Examples

Related specifications

See also

Related articles

Regions

External resources