flexbox-box-sizing-on-container-horiz-1-ref.html (753B)
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 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 9 <meta charset="utf-8"> 10 <style> 11 .container { 12 width: 100px; 13 height: 20px; 14 border: 5px solid black; 15 } 16 .container > * { 17 height: 18px; 18 float: left; 19 } 20 .itemA { 21 width: 38px; 22 background: purple; 23 border: 1px solid indigo; 24 } 25 .itemB { 26 width: 58px; 27 background: teal; 28 border: 1px solid lightblue; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="container"> 34 <div class="itemA"></div> 35 <div class="itemB"></div> 36 </div> 37 </body> 38 </html>