block-max-height-002b.html (1201B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: min/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-001b-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 { 20 min-height: 112px; 21 max-height: 128px; 22 background: yellow; 23 border: solid; 24 border-width:10px 0 6px 0; 25 padding: 5px 0 3px 0; 26 } 27 .columns > div > div { height:200px; width:50px; border:solid; } 28 </style> 29 </head> 30 <body> 31 <div class="columns"> 32 BEFORE 33 <div> 34 <div></div> 35 </div> 36 AFTER 37 </div> 38 <div class="columns" style="height:100px"> 39 BEFORE 40 <div> 41 <div></div> 42 </div> 43 AFTER 44 </div> 45 <div class="columns" style="height:70px"> 46 BEFORE 47 <div> 48 <div></div> 49 </div> 50 AFTER 51 </div> 52 <div class="columns" style="height:50px"> 53 BEFORE 54 <div> 55 <div></div> 56 </div> 57 AFTER 58 </div> 59 </body> 60 </html>