flexbox-unbreakable-child-3-ref.html (1878B)
1 <!DOCTYPE html> 2 <!-- Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ --> 4 <html> 5 <head> 6 <style> 7 .multicol { 8 height: 10px; 9 width: 100px; 10 border: 2px solid orange; 11 margin-bottom: 15px; /* (just for spacing between testcases) */ 12 position: relative; 13 } 14 .flexContainer { 15 width: 40px; 16 background: teal; 17 border: 1px dashed black; 18 } 19 .continuation { 20 position: absolute; 21 right: 0; 22 top: 0; 23 } 24 .item { 25 display: block; 26 width: 100%; 27 height: 20px; 28 } 29 </style> 30 </head> 31 <body> 32 <!-- auto-height container: --> 33 <div class="multicol"> 34 <div class="flexContainer"> 35 <img src="" class="item"> 36 </div> 37 </div> 38 39 <!-- fixed-height container, smaller than available height: --> 40 <div class="multicol"> 41 <div class="flexContainer" style="height: 8px"> 42 <img src="" class="item"> 43 </div> 44 </div> 45 46 <!-- fixed-height container, between available height and child height: --> 47 <div class="multicol"> 48 <div class="flexContainer" style="height: 15px"> 49 <img src="" class="item"> 50 </div> 51 <div class="flexContainer continuation" style="height: 0px"></div> 52 </div> 53 </div> 54 55 <!-- fixed-height container, same as child height: --> 56 <div class="multicol"> 57 <div class="flexContainer" style="height: 20px"> 58 <img src="" class="item"> 59 </div> 60 <div class="flexContainer continuation" style="height: 0px"></div> 61 </div> 62 63 <!-- fixed-height container, larger than child height: --> 64 <div class="multicol"> 65 <div class="flexContainer" style="height: 20px"> 66 <img src="" class="item"> 67 </div> 68 <div class="flexContainer continuation" style="height: 4px"></div> 69 </div> 70 </body> 71 </html>