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