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