content-height-with-scrollbars-ref.html (1105B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 .outer { 6 height: 100px; 7 overflow:scroll; 8 } 9 .outer > div, td:nth-child(1) { 10 background-color: lightgreen; 11 } 12 td:nth-child(2) { 13 background-color: lightblue; 14 } 15 table, td { 16 padding: 0; 17 border-spacing: 0; 18 } 19 </style> 20 </head> 21 <body> 22 <p>This tests that when setting the height of a flex item to a percentage 23 height, we use the content height with scrollbars. The content should not be 24 scrollable in any of the test cases below.</p> 25 26 <div class="outer"> 27 <div style="height: 100%"></div> 28 </div> 29 30 <div class="outer"> 31 <div style="height: 100%; box-sizing: border-box; border: 5px solid green"></div> 32 </div> 33 34 <div class="outer"> 35 <div style="display:inline-block; height: 50px; width: 50%;"></div><div 36 style="display:inline-block; height: 50px; width: 50%; background-color: lightblue"></div> 37 </div> 38 <div class="outer" style="padding: 10px; height: auto"> 39 <table style="margin: 0; padding: 0; width: 600px"> 40 <tr> 41 <td style="width: 50%; height: 50px"></td> 42 <td style="width: 50%; height: 50px"></td> 43 </tr> 44 </table> 45 </body> 46 </html>