content-height-with-scrollbars.html (1545B)
1 <!DOCTYPE html> 2 <html> 3 <title>Ensure flexbox content-size excludes scrollbar.</title> 4 <link href="support/flexbox.css" rel="stylesheet"> 5 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#min-size-auto"> 6 <link rel="help" href="https://www.w3.org/TR/css-overflow-4/#classic-scrollbars"> 7 <link rel="match" href="reference/content-height-with-scrollbars-ref.html"> 8 <meta name="assert" content="This test ensures that content-size of a flexbox with scrollbars looks correct."/> 9 <style> 10 .flexbox { 11 height: 100px; 12 overflow: scroll; 13 } 14 .flexbox > div { 15 flex: none; 16 } 17 .flexbox > :nth-child(1) { 18 background-color: lightgreen; 19 } 20 .flexbox > :nth-child(2) { 21 background-color: lightblue; 22 } 23 </style> 24 <body> 25 <p>This tests that when setting the height of a flex item to a percentage 26 height, we use the content height with scrollbars. The content should not be 27 scrollable in any of the test cases below.</p> 28 29 <div class="flexbox column"> 30 <div style="height: 100%"></div> 31 </div> 32 33 <div class="flexbox column"> 34 <div style="height: 100%; box-sizing: border-box; border: 5px solid green"></div> 35 </div> 36 37 <div class="flexbox column wrap"> 38 <div style="height: 50px; width: 50%;"></div> 39 <div style="height: 50px; width: 50%; background-color: lightblue"></div> 40 </div> 41 42 <div class="flexbox column wrap align-content-flex-start" style="height: auto; max-height: 100px; padding: 10px;"> 43 <div style="height: 50px; width: 300px;"></div> 44 <div style="height: 50px; width: 300px; background-color: lightblue"></div> 45 </div> 46 </body> 47 </html>