break-inside-avoid-min-block-size-1.html (1660B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: break-inside:avoid min-block-size block</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=1711630"> 7 <link rel="help" href="https://drafts.csswg.org/css-break"> 8 <link rel="match" href="break-inside-avoid-min-block-size-1-ref.html"> 9 <style> 10 html,body { 11 color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; 12 } 13 .columns { 14 columns: 3; 15 background: grey; 16 margin-block-end: 1px; 17 inline-size: 500px; 18 } 19 .fill { 20 column-fill: auto; 21 } 22 .short { 23 block-size: 30px; 24 } 25 .tall { 26 block-size: 60px; 27 } 28 .columns > div { 29 break-inside: avoid; 30 min-block-size: 40px; 31 background: blue; 32 } 33 .columns > div:nth-child(2n) { background: lightblue; } 34 </style> 35 </head> 36 <body> 37 <div class="columns"> 38 <div></div> 39 <div></div> 40 </div> 41 <div class="columns"> 42 <div> <br> </div> 43 <div> <br> </div> 44 </div> 45 <div class="columns short"> 46 <div></div> 47 <div></div> 48 </div> 49 <div class="columns short"> 50 <div> <br> </div> 51 <div> <br> </div> 52 </div> 53 <div class="columns tall"> 54 <div></div> 55 <div></div> 56 </div> 57 <div class="columns tall"> 58 <div> <br> </div> 59 <div> <br> </div> 60 </div> 61 <div class="columns fill short"> 62 <div></div> 63 <div></div> 64 </div> 65 <div class="columns fill short"> 66 <div> <br> </div> 67 <div> <br> </div> 68 </div> 69 <div class="columns fill tall"> 70 <div></div> 71 <div></div> 72 </div> 73 <div class="columns fill tall"> 74 <div> <br> </div> 75 <div> <br> </div> 76 </div> 77 </body> 78 </html>