flexbox-intrinsic-sizing-horiz-2b.xhtml (1114B)
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 is like the -2a variant, but with a <div> instead of an <img> 8 at the deepest level of nesting. 9 --> 10 <html xmlns="http://www.w3.org/1999/xhtml"> 11 <head> 12 <style> 13 body { margin: 0; } 14 15 div.flexbox { 16 display: flex; 17 width: max-content; 18 19 /* We give the flex container a border and background so we can easily 20 * see how large it is. */ 21 border: 2px dotted black; 22 background: lime; 23 } 24 25 div.wrapper { 26 border: 5px solid teal; 27 width: 40px; 28 height: 16px; 29 } 30 div.blueBlock { 31 width: 16px; 32 height: 16px; 33 background: rgb(0, 19, 127); /* matches solidblue.png */ 34 } 35 </style> 36 </head> 37 <body> 38 <div class="flexbox"> 39 <div class="wrapper"><div class="blueBlock"/></div> 40 <div class="wrapper"><div class="blueBlock"/></div> 41 <div class="wrapper"><div class="blueBlock"/></div> 42 </div> 43 </body> 44 </html>