flexbox-intrinsic-sizing-horiz-2-ref.xhtml (1181B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- 7 This reference case has inline blocks in a div, in place of 8 flex items in a flex container. 9 --> 10 <html xmlns="http://www.w3.org/1999/xhtml"> 11 <head> 12 <style> 13 body { margin: 0; } 14 15 div.flexbox { 16 width: max-content; 17 /* We give the flex container a border and background so we can easily 18 * see how large it is. */ 19 border: 2px dotted black; 20 background: lime; 21 22 font-size: 0; /* to prevent whitespace from having an effect */ 23 } 24 25 div.wrapper { 26 display: inline-block; 27 border: 5px solid teal; 28 width: 40px; 29 height: 16px; 30 } 31 div.blueBlock { 32 width: 16px; 33 height: 16px; 34 background: rgb(0, 19, 127); /* matches solidblue.png */ 35 } 36 </style> 37 </head> 38 <body> 39 <div class="flexbox"> 40 <div class="wrapper"><div class="blueBlock"/></div> 41 <div class="wrapper"><div class="blueBlock"/></div> 42 <div class="wrapper"><div class="blueBlock"/></div> 43 </div> 44 </body> 45 </html>