flexbox-unbreakable-child-3d-wrap.html (1934B)
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 a single unbreakable 5 child, with the flex container having "flex-direction: column-reverse", 6 "flex-wrap: wrap" and "box-decoration-break: clone". 7 --> 8 <html> 9 <head> 10 <style> 11 .multicol { 12 height: 10px; 13 width: 100px; 14 column-width: 30px; 15 column-fill: auto; 16 border: 2px solid orange; 17 margin-bottom: 15px; /* (just for spacing between testcases) */ 18 } 19 .flexContainer { 20 display: flex; 21 flex-direction: column-reverse; 22 flex-wrap: wrap; 23 justify-content: flex-end; 24 background: teal; 25 border: 1px dashed black; 26 box-decoration-break: clone; 27 } 28 .item { 29 width: 100%; 30 height: 20px; 31 flex: none; 32 } 33 </style> 34 </head> 35 <body> 36 <!-- auto-height container: --> 37 <div class="multicol"> 38 <div class="flexContainer"> 39 <img src="" class="item"> 40 </div> 41 </div> 42 43 <!-- fixed-height container, smaller than available height: --> 44 <div class="multicol"> 45 <div class="flexContainer" style="height: 8px"> 46 <img src="" class="item"> 47 </div> 48 </div> 49 50 <!-- fixed-height container, between available height and child height: --> 51 <div class="multicol"> 52 <div class="flexContainer" style="height: 15px"> 53 <img src="" class="item"> 54 </div> 55 </div> 56 57 <!-- fixed-height container, same as child height: --> 58 <div class="multicol"> 59 <div class="flexContainer" style="height: 20px"> 60 <img src="" class="item"> 61 </div> 62 </div> 63 64 <!-- fixed-height container, larger than child height: --> 65 <div class="multicol"> 66 <div class="flexContainer" style="height: 24px"> 67 <img src="" class="item"> 68 </div> 69 </div> 70 </body> 71 </html>