testing/web-platform/tests/css/css-intrinsic-size/intrinsic-size-with-legacy-002-ref.html

   1 <!doctype html>
   2 <meta charset="utf8">
   3 <title>CSS intrinsic-size: flex with legacy intrinsic dimensions</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   height: 500px;
  12 }
  13 .item {
  14   width: max-content;
  15 }
  16 #one {
  17   background: lightblue;
  18   flex-grow: 3;
  19 }
  20 #one > div {
  21   height: 222px;
  22 }
  23 #two {
  24   background: lightgreen;
  25   width: 333px;
  26   flex-grow: 2;
  27 }
  28 #three {
  29   background: lightgrey;
  30   flex-grow: 1;
  31 }
  32 #three > div {
  33   height: 444px;
  34 }
  35 </style>
  36
  37 <div id=flex>
  38   <div class=item id=one><div>Lorem ipsum</div></div>
  39   <div class=item id=two>dolor sit amet</div>
  40   <div class=item id=three><div>consectetur adipiscing elit</div></div>
  41 </div>