flexbox-unbreakable-child-2-ref.html (2269B)
1 <!DOCTYPE html> 2 <!-- Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ --> 4 <!-- Testcase for how we fragment a flex container with several children in a 5 multi-line vertical flexbox. 6 --> 7 <html> 8 <head> 9 <style> 10 .multicol { 11 height: 38px; 12 width: 100px; 13 column-width: 60px; 14 column-fill: auto; 15 border: 2px solid purple; 16 margin-bottom: 15px; /* (just for spacing between testcases) */ 17 } 18 .flexContainer { 19 background: yellow; 20 } 21 .item { 22 width: 40px; 23 height: 15px; 24 border: 1px dotted teal; 25 margin: 1px; 26 font: 10px serif; 27 float: left; 28 } 29 </style> 30 </head> 31 <body> 32 <!-- auto-height container: --> 33 <div class="multicol"> 34 <div class="flexContainer" style="height: calc(19px*3)"> 35 <div style="width: 50px"> 36 <div class="item">1</div> 37 <div class="item">2</div> 38 <div class="item">3</div> 39 </div> 40 </div> 41 </div> 42 43 <!-- auto-height container, with enough children that our last flex line 44 overflows (in the cross axis) --> 45 <div class="multicol"> 46 <div class="flexContainer" style="height: calc(19px*5)"> 47 <div style="width: 50px"> 48 <div class="item">1</div> 49 <div class="item">2</div> 50 <div class="item">3</div> 51 <div class="item">4</div> 52 <div class="item">5</div> 53 </div> 54 </div> 55 </div> 56 57 <!-- fixed-height container--> 58 <div class="multicol"> 59 <div class="flexContainer" style="height: 70px"> 60 <div style="width: 50px"> 61 <div class="item">1</div> 62 <div class="item">2</div> 63 <div class="item">3</div> 64 </div> 65 </div> 66 </div> 67 68 <!-- fixed-height container, with enough children that our last flex line 69 overflows (in the cross axis) --> 70 <div class="multicol"> 71 <div class="flexContainer" style="height: 70px"> 72 <div style="width: 100px"> 73 <div class="item">1</div> 74 <div class="item">4</div> 75 <div class="item">2</div> 76 <div class="item">5</div> 77 <div class="item">3</div> 78 </div> 79 </div> 80 </div> 81 </body> 82 </html>