third_party/WebKit/LayoutTests/css3/flexbox/content-height-with-scrollbars.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/flexbox.css" rel="stylesheet">
   5 <style>
   6 .flexbox {
   7     height: 100px;
   8     overflow: scroll;
   9 }
  10 .flexbox > div {
  11     flex: none;
  12     flex: none;
  13 }
  14 .flexbox > :nth-child(1) {
  15     background-color: lightgreen;
  16 }
  17 .flexbox > :nth-child(2) {
  18     background-color: lightblue;
  19 }
  20 </style>
  21 </head>
  22 <body>
  23 <p>This tests that when setting the height of a flex item to a percentage
  24 height, we use the content height with scrollbars. The content should not be
  25 scrollable in any of the test cases below.</p>
  26
  27 <div class="flexbox column">
  28   <div style="height: 100%"></div>
  29 </div>
  30
  31 <div class="flexbox column">
  32   <div style="height: 100%; box-sizing: border-box; border: 5px solid green"></div>
  33 </div>
  34
  35 <div class="flexbox column wrap">
  36   <div style="height: 50px; width: 50%;"></div>
  37   <div style="height: 50px; width: 50%; background-color: lightblue"></div>
  38 </div>
  39
  40 <div class="flexbox column wrap align-content-flex-start" style="height: auto; max-height: 100px; padding: 10px;">
  41   <div style="height: 50px; width: 300px;"></div>
  42   <div style="height: 50px; width: 300px; background-color: lightblue"></div>
  43 </div>
  44 </body>
  45 </html>