LayoutTests/fast/flexbox/011.html

   1 <html>
   2 <head>
   3 <style>
   4 div {
   5   display: -moz-box;
   6   display: -khtml-box;
   7   display: box;
   8 }
   9
  10 div.strut {
  11   border: 2px solid green;
  12   margin: 2px;
  13 }
  14
  15 div.flex {
  16   -moz-box-flex: 1;
  17   -khtml-box-flex: 1;
  18   box-flex: 1;
  19   border: 2px solid purple;
  20   margin: 2px;
  21 }
  22 </style>
  23 </head>
  24 <body>
  25 <p>You should see a black box below that is the width of the content area.  It contains alternating struts
  26 and springs.  The struts are bordered in green and are inflexible.  The springs are bordered in purple
  27 and should grow and shrink as you resize your browser window.  The black box should get taller when
  28 you make your window wider and get shorter when you shrink your browser window.
  29 </p>
  30
  31 <div style="padding:2px; border:2px solid black">
  32 <div class="strut">
  33 Fixed
  34 </div>
  35 <div class="flex">
  36 This is a flexible block, and it will shrink or grow as needed.
  37 </div>
  38 <div class="strut">
  39 Fixed
  40 </div>
  41 <div class="flex">
  42 This is a flexible block, and it will shrink or grow as needed.
  43 </div>
  44 <div class="strut">
  45 Fixed
  46 </div>
  47 <div class="flex">
  48 This is a flexible block, and it will shrink or grow as needed.
  49 </div>
  50 <div class="strut">
  51 Fixed
  52 </div>
  53 </div>
  54 </body>
  55
  56