flex-item-transferred-sizes-padding-content-sizing.html (1198B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com" /> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers" /> 6 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-width" /> 7 <link rel="help" href="https://drafts.csswg.org/css-sizing/#box-sizing" /> 8 <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=243887" /> 9 <link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> 10 </head> 11 <!-- Item div should be a 100px x 100px square. Content width will be 90px, 12 which comes from the min-height constraint being transferred to the 13 min-width. 5px padding on all sides will give the box a resulting 14 size of 100x x 100px. --> 15 <style> 16 .flexContainer { 17 display: flex; 18 flex-direction: column; 19 float: left; 20 } 21 .item { 22 background: green; 23 padding: 5px 5px 5px 5px; 24 } 25 </style> 26 <body> 27 <p>Test passes if there is a filled green square.</p> 28 <div class="flexContainer"> 29 <div class="item" style="min-height:90px; aspect-ratio: 1/1;"></div> 30 </div> 31 </body> 32 </html>