| OLD | NEW | 
|---|
|  | (Empty) | 
| 1 <!doctype html> |  | 
| 2 <html style="direction:rtl"> |  | 
| 3 <head> |  | 
| 4  <style> |  | 
| 5     #content { |  | 
| 6        -webkit-flow-into: flow1; |  | 
| 7     } |  | 
| 8 |  | 
| 9     #first-box { |  | 
| 10         margin:10%; |  | 
| 11         text-align:center; |  | 
| 12     } |  | 
| 13 |  | 
| 14     #second-box { |  | 
| 15         position:absolute; |  | 
| 16         top:0; |  | 
| 17         bottom:0; |  | 
| 18         width:100px; |  | 
| 19         background-color:green; |  | 
| 20     } |  | 
| 21 |  | 
| 22     #region1, #region2, #region3 { |  | 
| 23         border: 1px solid black; |  | 
| 24         -webkit-flow-from: flow1; |  | 
| 25     } |  | 
| 26 |  | 
| 27     #region1 { |  | 
| 28         width: 200px; |  | 
| 29         height: 150px; |  | 
| 30     } |  | 
| 31 |  | 
| 32     #region2 { |  | 
| 33         width: 300px; |  | 
| 34         height: 180px; |  | 
| 35     } |  | 
| 36 |  | 
| 37     #region3 { |  | 
| 38         width: 120px; |  | 
| 39         height: 120px; |  | 
| 40     } |  | 
| 41 </style> |  | 
| 42 </head> |  | 
| 43 <body> |  | 
| 44 <p style="direction:ltr">The green positioned object should only be as tall as t
    he first region it |  | 
| 45 is contained in. It should fill the left half of the first region.</p> |  | 
| 46 |  | 
| 47 <div id="content"> |  | 
| 48     <div id="first-box"> |  | 
| 49         <span id="second-box"> |  | 
| 50         </span> |  | 
| 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 | 
|---|