overflow-auto-008.html (1333B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Flexbox: adding scrollbars with overflow: auto and flex-direction: column.</title> 4 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties"> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> 6 <link rel="help" href="https://crbug.com/512229"> 7 <meta name="assert" content="This test checks that, when a block inside a flexbox with flex-direction: column adds horizontal scrollbars due to overflow, the parent flexbox is still able to render its contents without overflowing."/> 8 9 <style> 10 .vflex { 11 display: flex; 12 flex-direction: column; 13 max-width: 200px; 14 margin: 10px 0 10px 0; 15 } 16 17 .hbox { 18 overflow-x: auto; 19 white-space: nowrap; 20 } 21 22 .rect { 23 min-height: 100px; 24 min-width: 100px; 25 background-color: green; 26 display: inline-block; 27 } 28 </style> 29 30 <script src="/resources/testharness.js"></script> 31 <script src="/resources/testharnessreport.js"></script> 32 33 <body> 34 35 <div class="vflex"> 36 <div class="hbox"> 37 <div class="rect"></div> 38 <div class="rect"></div> 39 </div> 40 </div> 41 42 <script> 43 var hbox = document.querySelector('.hbox'); 44 test(function() { 45 assert_equals(hbox.parentNode.clientHeight, hbox.parentNode.scrollHeight); 46 assert_equals(hbox.clientHeight, hbox.scrollHeight); 47 }, 'hbox dimensions'); 48 </script> 49 </body> 50 </html>