row-auto-placement-max-content-ref.html (1157B)
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 html,body { 7 color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; 8 } 9 10 .grid { 11 display: grid; 12 grid-template-rows: 15px auto auto; 13 align-items: start; 14 background: gray; 15 padding: 10px; 16 width: max-content; 17 } 18 19 .flex { 20 display: flex; 21 flex-direction: row; 22 overflow: visible; 23 flex-wrap: nowrap; 24 width: max-content; 25 } 26 </style> 27 <body> 28 <p>Ensure that grid-lanes containers are sized correctly under max-content constraints even if the items do not have the max-content style.</p> 29 <div class="grid"> 30 <div class="flex"> 31 <div style="background: lightskyblue;"> 32 Number 1 33 </div> 34 <div style="background: brown; height: 30px;"> 35 Number 4 36 </div> 37 </div> 38 <div class="flex"> 39 <div style="background: lightcoral;"> 40 Number 2 41 </div> 42 </div> 43 <div class="flex"> 44 <div style="background: lightgreen;"> 45 Number 3 46 </div> 47 </div> 48 </div> 49 </body> 50 </html>