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