block-max-height-001-ref.html (897B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Reference: max-height block fragmentation</title> 5 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 6 <style> 7 html,body { 8 color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0; 9 width: 300px; 10 } 11 .columns { 12 columns: 3; 13 background: grey; 14 margin-bottom: 1em; 15 } 16 .columns > div { height:160px; background: yellow; } 17 .columns > div > div { height:200px; width:50px; border:solid; } 18 </style> 19 </head> 20 <body> 21 <div class="columns"> 22 BEFORE 23 <div> 24 <div></div> 25 </div> 26 AFTER 27 </div> 28 <div class="columns" style="height:100px"> 29 BEFORE 30 <div> 31 <div></div> 32 </div> 33 AFTER 34 </div> 35 <div class="columns" style="height:70px"> 36 BEFORE 37 <div> 38 <div></div> 39 </div> 40 AFTER 41 </div> 42 <div class="columns" style="height:50px"> 43 BEFORE 44 <div> 45 <div></div> 46 </div> 47 AFTER 48 </div> 49 </body> 50 </html>