flexbox-unbreakable-child-3d.html (1892B)
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" and 6 "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 justify-content: flex-end; 23 background: teal; 24 border: 1px dashed black; 25 box-decoration-break: clone; 26 } 27 .item { 28 width: 100%; 29 height: 20px; 30 flex: none; 31 } 32 </style> 33 </head> 34 <body> 35 <!-- auto-height container: --> 36 <div class="multicol"> 37 <div class="flexContainer"> 38 <img src="" class="item"> 39 </div> 40 </div> 41 42 <!-- fixed-height container, smaller than available height: --> 43 <div class="multicol"> 44 <div class="flexContainer" style="height: 8px"> 45 <img src="" class="item"> 46 </div> 47 </div> 48 49 <!-- fixed-height container, between available height and child height: --> 50 <div class="multicol"> 51 <div class="flexContainer" style="height: 15px"> 52 <img src="" class="item"> 53 </div> 54 </div> 55 56 <!-- fixed-height container, same as child height: --> 57 <div class="multicol"> 58 <div class="flexContainer" style="height: 20px"> 59 <img src="" class="item"> 60 </div> 61 </div> 62 63 <!-- fixed-height container, larger than child height: --> 64 <div class="multicol"> 65 <div class="flexContainer" style="height: 24px"> 66 <img src="" class="item"> 67 </div> 68 </div> 69 </body> 70 </html>