flexbox-box-sizing-on-items-vert-1b.html (1430B)
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 <title>CSS Test: Testing a vertical flex container with box-sizing:border-box on its flex items</title> 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 10 <meta charset="utf-8"> 11 <style> 12 .container { 13 display: flex; 14 flex-direction: column; 15 width: 30px; 16 height: 100px; 17 border: 1px solid black; 18 float: left; 19 margin: 2px; 20 } 21 .container > * { 22 box-sizing: border-box; 23 } 24 .itemA { 25 flex-basis: 30px; 26 background: purple; 27 border: 4px solid indigo; 28 } 29 .itemB { 30 flex-basis: 50px; 31 background: teal; 32 border: 5px solid lightblue; 33 } 34 </style> 35 </head> 36 <body> 37 <!-- FIRST ROW --> 38 <!-- 1 inflexible item --> 39 <div class="container"> 40 <div class="itemA"></div> 41 </div> 42 <!-- 1 flexible item --> 43 <div class="container"> 44 <div class="itemA" style="flex-grow: 1"></div> 45 </div> 46 47 <div style="clear: both"></div> 48 49 <!-- SECOND ROW --> 50 <!-- 2 inflexible items --> 51 <div class="container"> 52 <div class="itemA"></div> 53 <div class="itemB"></div> 54 </div> 55 <!-- 2 flexible items --> 56 <div class="container"> 57 <div class="itemA" style="flex-grow: 1"></div> 58 <div class="itemB" style="flex-grow: 1"></div> 59 </div> 60 </body> 61 </html>