overflow-auto-003.html (1465B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Flexbox: margin: auto and overflow: auto with nested flexboxes.</title> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#auto-margins"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties"> 6 <link rel="help" href="https://drafts.csswg.org/css-box-3/#margins"> 7 <link rel="help" href="https://crbug.com/605682"> 8 <meta name="assert" content="This test checks that 'margin: auto' set on the outer box gets properly handled when the inner box uses 'overflow: auto', in a layout with two nested flexboxes." /> 9 10 <style> 11 html, body { 12 margin: 0; 13 padding: 0; 14 } 15 16 .flexbox { 17 display: flex; 18 background: papayawhip; 19 width: 800px; 20 } 21 22 .flexbox > div { 23 width: 300px; 24 height: 300px; 25 margin: 0 auto; 26 background: olive; 27 } 28 29 .flexbox > div > div { 30 overflow-y: auto; 31 height: 50px; 32 visibility: hidden; 33 } 34 35 .elm { 36 height: 10px; 37 } 38 </style> 39 40 <script src="/resources/testharness.js"></script> 41 <script src="/resources/testharnessreport.js"></script> 42 <script src="/resources/check-layout-th.js"></script> 43 44 <body> 45 46 <div id=log></div> 47 <p>Below there should be a olive square <em>centered</em> inside a papayawhip box.</p> 48 <div class="flexbox"> 49 <div data-offset-x="250"> 50 <div> 51 <div id="elm"></div> 52 </div> 53 </div> 54 </div> 55 56 <script> 57 document.body.offsetTop; 58 document.getElementById("elm").style.height = "800px"; 59 checkLayout('.flexbox'); 60 </script> 61 </body> 62 </html>