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