overflow-auto-002.html (1458B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Flexbox: correct width for non-overflowing content with flex-direction: column</title> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties"> 6 <link rel="help" href="https://crbug.com/580586"> 7 <meta name="assert" content="This test checks that no unnecessary extra horizontal space is considered for vertical scrollbars for non-overflowing content using flex-direction: column." /> 8 9 <style> 10 body { 11 height: 200vh; 12 } 13 14 section { 15 height: 400px; 16 display: flex; 17 flex-direction: column; 18 } 19 20 .side-menu { 21 border: 1px solid black; 22 width: 200px; 23 display: flex; 24 flex-direction: column; 25 } 26 27 .box-body { 28 height: 1000px; 29 flex: 1 1 0%; 30 display: flex; 31 min-height: 0px; 32 } 33 34 .list { 35 list-style: none; 36 padding: 0; 37 overflow: auto; 38 flex: 1 1 0; 39 } 40 41 li { 42 height: 20px; 43 background-color: red; 44 } 45 </style> 46 47 <script src="/resources/testharness.js"></script> 48 <script src="/resources/testharnessreport.js"></script> 49 <script src="/resources/check-layout-th.js"></script> 50 <body onload="checkLayout('section')"> 51 52 <div id=log></div> 53 54 <section> 55 <div class="box-body"> 56 <div class="side-menu"> 57 <ul class="list"> 58 <li data-expected-width="200"> 59 </li> 60 </ul> 61 </div> 62 <div style="height: 1000px;"></div> 63 </div> 64 </section> 65 </body> 66 </html>