flexbox-table-flex-items-2-ref.html (1491B)
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 <meta charset="utf-8"> 9 <title>CSS Reftest Reference</title> 10 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 11 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-base-size"> 12 <style> 13 .container { 14 display: flex; 15 width: 100px; 16 border: 1px solid black; 17 } 18 19 /* Two types of flex items: */ 20 .table { 21 border: 2px solid teal; 22 } 23 .block { 24 border: 2px solid brown; 25 } 26 27 /* Each flex item gets one of these as its contents, 28 to have a nonzero content size: */ 29 ib { 30 display: inline-block; 31 background: blue; 32 border: 1px solid gray; 33 width: 15px; 34 height: 10px; 35 } 36 </style> 37 </head> 38 <body> 39 <!-- auto size: --> 40 <div class="container"> 41 <div class="table"><ib></ib></div> 42 <div class="block"><ib></ib></div> 43 </div> 44 45 <!-- px size: --> 46 <div class="container"> 47 <div class="table" style="width: 30px"><ib></ib></div> 48 <div class="block" style="width: 30px"><ib></ib></div> 49 </div> 50 51 <!-- % size: --> 52 <div class="container"> 53 <div class="table" style="width: 30%"><ib></ib></div> 54 <div class="block" style="width: 30%"><ib></ib></div> 55 </div> 56 57 <!-- calc() size: --> 58 <div class="container"> 59 <div class="table" style="width: calc(10px + 20%)"><ib></ib></div> 60 <div class="block" style="width: calc(10px + 20%)"><ib></ib></div> 61 </div> 62 63 </body> 64 </html>