overflow-auto-001.html (1222B)
1 <!DOCTYPE html> 2 3 <title>Tests that we consider main axis sizes to be definite in column flexboxes 4 when the height is an explicit definite height, even if the container does 5 not have a definite main axis size.</title> 6 <link rel="author" title="Google LLC" href="https://www.google.com/"> 7 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item"> 8 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 9 10 <style> 11 /* Make it possible for red to appear in webkit/blink browsers. But the test 12 * still works in other browsers, you'll just get a grey scrollbar that 13 * shouldn't be there. 14 */ 15 ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar { 16 width: 10px; 17 background: red; 18 } 19 20 #flex { 21 display: flex; 22 } 23 24 #item { 25 height: 300px; 26 overflow: auto; 27 scrollbar-color: red; 28 } 29 30 #child { 31 height: 600px; 32 } 33 </style> 34 35 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 36 37 <div style="width: 100px; height: 100px; background: green;"></div> 38 39 <div id="flex"> 40 <div id="item"> 41 <div id="child"> 42 Text 43 </div> 44 </div> 45 </div> 46 47 <script> 48 var item = document.getElementById('item'); 49 item.offsetHeight; 50 item.style.width = 0; 51 </script>