| 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         text-align:center; |  | 
|  11     } |  | 
|  12      |  | 
|  13     #second-box { |  | 
|  14         position:absolute; |  | 
|  15         top:0; |  | 
|  16         bottom:0; |  | 
|  17         width:100px; |  | 
|  18         background-color:green |  | 
|  19     } |  | 
|  20      |  | 
|  21     #region1, #region2, #region3 { |  | 
|  22         border: 1px solid black; |  | 
|  23         -webkit-flow-from: flow1; |  | 
|  24     } |  | 
|  25  |  | 
|  26     #region1 { |  | 
|  27         width: 200px; |  | 
|  28         height: 150px; |  | 
|  29     } |  | 
|  30      |  | 
|  31     #region2 { |  | 
|  32         width: 300px; |  | 
|  33         height: 180px; |  | 
|  34     } |  | 
|  35      |  | 
|  36     #region3 { |  | 
|  37         width: 120px; |  | 
|  38         height: 120px; |  | 
|  39     } |  | 
|  40 </style> |  | 
|  41  |  | 
|  42 <body> |  | 
|  43 <p>The green positioned object should only be as tall as the first region it |  | 
|  44 is contained in. It should fill the right half of the first region, and no red |  | 
|  45 should be visible.</p> |  | 
|  46  |  | 
|  47 <div id="content"> |  | 
|  48     <div id="first-box"> |  | 
|  49         <span id="second-box"> |  | 
|  50         </span> |  | 
|  51     </div> |  | 
|  52 </div> |  | 
|  53  |  | 
|  54 <div id="container"> |  | 
|  55     <div id="region1"></div> |  | 
|  56     <div id="region2"></div> |  | 
|  57     <div id="region3"></div> |  | 
|  58 </div> |  | 
| OLD | NEW |