testing/web-platform/tests/css/css-sizing/intrinsic-size/intrinsic-size-011-ref.html

   1 <!doctype html>
   2 <meta charset="utf8">
   3 <title>CSS intrinsic-size: flex column</title>
   4 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
   5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
   6
   7 <style>
   8 #flex {
   9   display: flex;
  10   flex-direction: column;
  11   width: 100px;
  12   height: 200px;
  13 }
  14 .item {
  15   border: 1px solid black;
  16   box-sizing: content-box;
  17 }
  18 #one {
  19   background: lightblue;
  20   height: 11px;
  21   flex-grow: 3;
  22 }
  23 #two {
  24   background: lightgreen;
  25   height: 22px;
  26   flex-grow: 2;
  27 }
  28 #three {
  29   background: lightgrey;
  30   height: 33px;
  31   flex-grow: 1;
  32 }
  33 </style>
  34
  35 <div id=flex>
  36   <div class=item id=one></div>
  37   <div class=item id=two></div>
  38   <div class=item id=three></div>
  39 </div>