Flowing content with CSS Regions

Hint: resize the browser window to see the content reflow.

With CSS Regions content can be extracted from its original DOM container into logical structures called named flows. These named flows can be used to associate the content with other containers called regions.

article{
    flow-into: myArticle
}

#region1, #region2, #region3{
    flow-from: myArticle
} 

The content of the article tag is pulled into a named flow called 'myArticle'. This named flow is associated with three regions. The original content of article now shows up in '#region1', '#region2' and '#region3'.

Multiple regions can be associated with the same named flow thus creating a region chain. Content flows from one region to another regardless of their positioning.

The Problem with Overflow

When content does not fit in a box CSS has a limited set of options for overflow: it can hide it, it can add scrollbars or it can chose to display it completely with the risk of breaking the design. CSS Regions brings the flexibility of redirecting overflow content into another box.