flexbox-intrinsic-sizing-horiz-2a.xhtml (1017B)
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 test checks how a flexbox sizes itself to shrinkwrap its contents' 8 preferred sizes. 9 --> 10 <html xmlns="http://www.w3.org/1999/xhtml"> 11 <head> 12 <style> 13 body { margin: 0; } 14 div.flexbox { 15 display: flex; 16 width: max-content; 17 18 /* We give the flexbox a border and background so we can easily see how 19 * large it is. */ 20 border: 2px dotted black; 21 background: lime; 22 } 23 24 div.imgWrapper { 25 border: 5px solid teal; 26 width: 40px; 27 height: 16px; 28 } 29 img { 30 vertical-align: top; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="flexbox"> 36 <div class="imgWrapper"><img src="solidblue.png"/></div> 37 <div class="imgWrapper"><img src="solidblue.png"/></div> 38 <div class="imgWrapper"><img src="solidblue.png"/></div> 39 </div> 40 </body> 41 </html>