flexbox-unbreakable-child-2.html (2070B)
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 display: flex; 20 flex-direction: column; 21 flex-wrap: wrap; 22 align-content: flex-start; 23 background: yellow; 24 } 25 .item { 26 width: 40px; 27 height: 15px; 28 border: 1px dotted teal; 29 margin: 1px; 30 font: 10px serif; 31 } 32 </style> 33 </head> 34 <body> 35 <!-- auto-height container: --> 36 <div class="multicol"> 37 <div class="flexContainer"> 38 <div class="item">1</div> 39 <div class="item">2</div> 40 <div class="item">3</div> 41 </div> 42 </div> 43 44 <!-- auto-height container, with enough children that our last flex line 45 overflows (in the cross axis) --> 46 <div class="multicol"> 47 <div class="flexContainer"> 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 56 <!-- fixed-height container--> 57 <div class="multicol"> 58 <div class="flexContainer" style="height: 70px"> 59 <div class="item">1</div> 60 <div class="item">2</div> 61 <div class="item">3</div> 62 </div> 63 </div> 64 65 <!-- fixed-height container, with enough children that our last flex line 66 overflows (in the cross axis) --> 67 <div class="multicol"> 68 <div class="flexContainer" style="height: 70px"> 69 <div class="item">1</div> 70 <div class="item">2</div> 71 <div class="item">3</div> 72 <div class="item">4</div> 73 <div class="item">5</div> 74 </div> 75 </div> 76 </body> 77 </html>