| OLD | NEW | 
 | (Empty) | 
|   1 <!doctype html> |  | 
|   2  |  | 
|   3  <style> |  | 
|   4     #content { |  | 
|   5        -webkit-flow-into: flow1; |  | 
|   6     } |  | 
|   7      |  | 
|   8     #first-box { |  | 
|   9         margin:10% |  | 
|  10     } |  | 
|  11      |  | 
|  12     #second-box { |  | 
|  13         position:absolute; |  | 
|  14         top:0; |  | 
|  15         bottom:0; |  | 
|  16         width:160px; |  | 
|  17         background-color:green |  | 
|  18     } |  | 
|  19      |  | 
|  20     #region1, #region2, #region3 { |  | 
|  21         border: 1px solid black; |  | 
|  22         -webkit-flow-from: flow1; |  | 
|  23     } |  | 
|  24  |  | 
|  25     #region1 { |  | 
|  26         width: 200px; |  | 
|  27         height: 150px; |  | 
|  28     } |  | 
|  29      |  | 
|  30     #region2 { |  | 
|  31         width: 300px; |  | 
|  32         height: 180px; |  | 
|  33     } |  | 
|  34      |  | 
|  35     #region3 { |  | 
|  36         width: 120px; |  | 
|  37         height: 120px; |  | 
|  38     } |  | 
|  39 </style> |  | 
|  40  |  | 
|  41 <body> |  | 
|  42 <p>The green positioned object should only be as tall as the first region it |  | 
|  43 is contained in. It should be centered in the first region, and no red |  | 
|  44 should be visible.</p> |  | 
|  45  |  | 
|  46 <div id="content"> |  | 
|  47     <div id="first-box"> |  | 
|  48         <div style="width:100px;height:100px;background-color:red"></div> |  | 
|  49         <div id="second-box"> |  | 
|  50              |  | 
|  51         </div> |  | 
|  52     </div> |  | 
|  53 </div> |  | 
|  54  |  | 
|  55 <div id="container"> |  | 
|  56     <div id="region1"></div> |  | 
|  57     <div id="region2"></div> |  | 
|  58     <div id="region3"></div> |  | 
|  59 </div> |  | 
| OLD | NEW |