position-absolute-005.html (1265B)
1 <!DOCTYPE html> 2 <title>CSS Test: Absolutely positioned children of flexboxes</title> 3 <link rel="author" title="Google Inc." href="http://www.google.com/"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> 5 <link rel="match" href="position-absolute-005-ref.html"> 6 <meta name="assert" content="Checks that we correctly handle overflow: auto in 7 abspos nodes in flexbox"> 8 9 <style> 10 body { 11 width: 400px; 12 height: 300px; 13 } 14 15 .flexbox { 16 display: flex; 17 } 18 19 .column { 20 flex-direction: column; 21 } 22 23 .flex11a { 24 flex: 1 1 auto; 25 } 26 27 .root { 28 height: 100px; 29 overflow-y: auto; 30 position: relative; 31 } 32 33 #abspos { 34 position: absolute; 35 left: 0; 36 right: 0; 37 top: 0; 38 height: 10px; 39 } 40 </style> 41 42 43 <p>This test should not have a horizontal scrollbar</p> 44 45 <div class="flexbox column"> 46 <div class="flexbox"> 47 <div class="flex11a"> 48 <div class="root"> 49 <div> 50 <div> 51 <div id="history"></div> 52 <div id="abspos"></div> 53 </div> 54 </div> 55 </div> 56 </div> 57 </div> 58 </div> 59 60 <script> 61 onload = function() { 62 var historyEl = document.getElementById('history'); 63 historyEl.offsetWidth; 64 historyEl.innerText = '\n\n\n\n\n\n\n\n'; 65 }; 66 </script>