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.
<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