column-flex-child-with-overflow-scroll.html (1262B)
1 <!DOCTYPE html> 2 <html> 3 <title>Proper height of column flex children with overflow: scroll.</title> 4 <link href="support/flexbox.css" rel="stylesheet"> 5 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> 6 <meta name="assert" content="This test ensures children of flexbox with flex-direction: column|column-reverse does not shrink their height after applying the overflow: scroll style."/> 7 <style> 8 div { 9 box-sizing: border-box; 10 } 11 12 .scroll { 13 overflow: scroll; 14 } 15 16 .box { 17 width: 100px; 18 height: 75px; 19 padding: 5px; 20 border: 2px solid red; 21 } 22 </style> 23 <script src="/resources/testharness.js"></script> 24 <script src="/resources/testharnessreport.js"></script> 25 <script src="/resources/check-layout-th.js"></script> 26 <body onload="checkLayout('.flexbox')"> 27 <div id=log></div> 28 <div class="flexbox column"> 29 <div class="box" data-expected-width="100" data-expected-height="75"></div> 30 <div class="box scroll" id="box2" data-expected-width="100" data-expected-height="75"></div> 31 </div> 32 33 <div class="flexbox column-reverse"> 34 <div class="box" data-expected-width="100" data-expected-height="75"></div> 35 <div class="box scroll" id="box4" data-expected-width="100" data-expected-height="75"></div> 36 </div> 37 </body> 38 </html>