overflow-auto-007.html (1326B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Flexbox: vertical space after changes 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/590683"> 7 <link rel="help" href="https://crbug.com/594465"> 8 <link rel="match" href="reference/overflow-auto-007-ref.html"> 9 <meta name="assert" content="This test checks that vertical space allocated to the content of a flexbox with 'overflow: auto' and 'flex-direction: column' is properly computed when its contents change." /> 10 11 <style> 12 body { 13 width: 400px; 14 height: 300px; 15 } 16 17 .flexbox { 18 display: flex; 19 } 20 21 .column { 22 flex-direction: column; 23 } 24 25 .flex11a { 26 flex: 1 1 auto; 27 } 28 29 .root { 30 height: 100px; 31 overflow-y: auto; 32 } 33 </style> 34 35 <body onload="runTest()"> 36 37 <p>This test should not have a horizontal scrollbar</p> 38 39 <div class="flexbox column"> 40 <div class="flexbox"> 41 <div class="flex11a"> 42 <div class="root"> 43 <div id="history"></div> 44 </div> 45 </div> 46 </div> 47 </div> 48 49 <script> 50 function runTest() { 51 var historyEl = document.getElementById('history'); 52 historyEl.offsetWidth; 53 historyEl.innerText = '\n\n\n\n\n\n\n\n'; 54 }; 55 </script> 56 57 </body> 58 </html>