flexbox-flex-basis-content-002-ref.html (2025B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title>CSS Reftest Reference</title> 9 <meta charset="utf-8"> 10 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 12 <style> 13 .container { 14 display: flex; 15 flex-direction: column; 16 justify-content: space-between; 17 border: 2px solid purple; 18 padding: 2px; 19 margin-right: 2em; 20 width: 50px; 21 height: 200px; 22 float: left; 23 } 24 25 .container > * { 26 flex-shrink: 0; 27 min-height: 0; 28 border: 2px solid teal; 29 } 30 31 .smallText { font: 10px Ahem; } 32 .bigText { font: 20px Ahem; } 33 .spacerChild::before { 34 content: ''; 35 display: block; 36 background: brown; 37 height: 10px; 38 width: 10px; 39 } 40 .justPadding { 41 /* Empty div with 5px padding on each side */ 42 padding: 5px; 43 background: cyan; 44 } 45 canvas { background: fuchsia } 46 </style> 47 </head> 48 <body> 49 <!-- Flex items have unspecified size properties: --> 50 <div class="container"> 51 <div class="smallText">a b</div> 52 <div class="bigText">c</div> 53 <div class="spacerChild"></div> 54 <div class="justPadding"></div> 55 <canvas height="20"></canvas> 56 </div> 57 58 <!-- Various specified main-size values, in testcase 59 (removed here in reference case, because they shouldn't affect sizing): --> 60 <div class="container"> 61 <div class="smallText">a b</div> 62 <div class="bigText">c</div> 63 <div class="spacerChild"></div> 64 <div class="justPadding"></div> 65 <canvas height="20"></canvas> 66 </div> 67 68 <!-- Various specified cross-size values (should be honored): --> 69 <div class="container"> 70 <div class="smallText" style="width: 0px">a b</div> 71 <div class="bigText" style="width: 40px">c</div> 72 <div class="spacerChild" style="width: 20px"></div> 73 <div class="justPadding" style="width: 10px"></div> 74 <canvas height="20" style="width: 8px"></canvas> 75 </div> 76 77 </body> 78 </html>