This is an old revision of the document!
The regions specification proposes a model for handling auto sizing on regions. This page contains use cases that illustrate how this model is used concretely.
<head> <style> #article { flow-into: article; } #regionA { width: auto; height: auto; flow-from: article; } </style> </head> <body> <div id="article">…</div> <div id="regionA"></div> </body>
The intrinsic size of the regionA RFCB (RFCB-A) is resolved as follows:
- The width of regionA's (RFCB-A) is the width of its container (e.g., 300px), since it behaves like a non-replaced block level element for that dimension. - The intrinsic height of RFCB-A is resolved as follows: - Phase 1: layout the document with a 'used' height of 0 for RFCB-A. - Phase 2: layout the 'article' named flow into regionA. Because regionA's height computed to 'auto', compute a new used height for RFCB-A. Assuming there is no break in the content, the used height will be that of the entire flow laid out in the RFCB-A width (because it is the first (http://www.w3.org/TR/css3-break/#fragmenter)fragmented box) This yields the intrinsic height (e.g., 1000px).
When layout happen, regionA will be laid out it's width is computed as that of any non-replaced block level element and its intrinsic height is 1000px and used as for any height computation of replaced elements. In our example, the regionA box will have used width and height of 300px x 1000px and will tightly fit the flow content.
<style> #article { flow-into: article; } #article p:first-child { region-break-after: always; } #regionA, #regionB { flow-from: article; } #regionA { width: 800px; height: auto; } #regionB { width: 400px; height: auto; } </style> <body> <div id="article"><p id="p1">Paragraph 1, ...</p><p id="p2">Paragraph 2, ...</p></div> <div id="regionA"></div> <!-- RFCB-A --> <div id="regionB"></div> <!-- RFCB-B --> </body>
To resolve the 'intrinsic' height of regionA and regionB:
- Phase 1: layout regions using a used height of 0 for both regionA and regionB. - Phase 2: layout the article flow content in regionA, then regionB: - the fragment used for regionA is the content of #p1 because there is a break after that paragraph (following the fragmentation rules). Using the rules for laying out a block level non-replaced element in the normal flow with overflow computing to visible. This yields a used height (RIH-1) to tightly wrap #p1 on the vertical dimension. - similarly, for regionB, the content of #p2 (the remainder of the flow) is used when computing the used height (RIH-2) for RFCB-2.
The RIH-1 and RIH-2 intrinsic heights are used during the layout of regions, before flowing named flow content into them.
<html><span style=“color:#a00;font-weight:bold”>IMPORTANT: THE FOLLOWING USE CASES NEED TO BE UPDATED</span></html>
<div style="display:flexbox"> <div id="region1" style="flow-from:x; flex:2"></div> <div id="region2" style="flow-from:x; flex:1"></div> </div>
Because region2 has height:auto:
Because there is a region with height:auto, a Step B is necessary.
<style> #regionA { top: 0; bottom: 0; width: 100px; position: absolute; flow-from: article; } #regionB { flow-from: article; width: 200px; margin-left: 120px; top: 0; right: 0; position: absolute; } #article { flow-into: article; } </style> <div id="article">…</div> <div id="container" style="position:relative"> <div id="regionA"></div> <div id="regionB"></div> </div>
[OBSERVATION: If you follow the rules of CSS 2.1 ch 10. the used size of absolutely positioned elements with height: auto; top:0px; bottom: 0px; will be the height of the containing block minus MBP, thus, this problem is practically non-existent]
Because there is a region with height:auto, a Step B is necessary.
regionA's bottom property's used value is 'Y'.
but will not fill in regionB completely.
<style> #article { flow-into: article; } #regionA, #regionB { flow-from: article; } #regionA { height: auto; column-count: 2; } #regionB { height: auto; column-count: 2; } </style> <div id="article">...</div> <div id="regionA"></div> <div id="regionB"></div>
layout content in regionB as well, and because region B has height:auto