row-defined-height-ref.html (1348B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> 5 <style> 6 .grid { 7 display: grid; 8 grid-template-rows: 100px 100px 100px; 9 align-items: start; 10 background: gray; 11 width: 300px; 12 height: 100px; 13 padding: 10px; 14 } 15 16 .flex { 17 display: flex; 18 flex-direction: row; 19 overflow: visible; 20 flex-wrap: nowrap; 21 } 22 23 .square-100x100 { 24 width: 100px; 25 height: 100px; 26 } 27 </style> 28 <body> 29 <p>Test that the user-defined block size is used over the intrinsic block size when displaying background.</p> 30 <div class="grid"> 31 <div class="flex"> 32 <div class="square-100x100" style="background: lightskyblue;"> 33 Number 1 34 </div> 35 <div class="square-100x100" style="background: lightpink;"> 36 Number 4 37 </div> 38 <div style="background: brown; width: 100px; height: 200px;"> 39 Number 4 40 </div> 41 </div> 42 <div class="flex"> 43 <div class="square-100x100" style="background: lightcoral;"> 44 Number 2 45 </div> 46 <div class="square-100x100" style="background: lightpink;"> 47 Number 5 48 </div> 49 </div> 50 <div class="flex"> 51 <div class="square-100x100" style="background: lightgreen;"> 52 Number 3 53 </div> 54 </div> 55 </div> 56 </body> 57 </html>