row-min-max-content-container-ref.html (1927B)
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: auto auto auto; 13 align-items: start; 14 background: gray; 15 padding: 10px; 16 } 17 18 .flex { 19 display: flex; 20 flex-direction: row; 21 overflow: visible; 22 flex-wrap: nowrap; 23 } 24 25 .invisible { 26 visibility: hidden; 27 } 28 </style> 29 <body> 30 <p>Ensure that containers with min and max-content constraints are sized correctly when all items inside are sized as min/max-content.</p> 31 <div class="grid" style="margin-bottom: 10px; width: min-content;"> 32 <div class="flex" style="width: min-content;"> 33 <div class="invisible" style="width: min-content;"> 34 Number 1 35 </div> 36 <div class="invisible" style="width: min-content;"> 37 Number 4 38 </div> 39 </div> 40 <div class="flex" style="width: min-content;"> 41 <div class="invisible" style="width: min-content;"> 42 Number 2 43 </div> 44 </div> 45 <div class="flex" style="width: min-content;"> 46 <div class="invisible" style="width: min-content;"> 47 Number 3 48 </div> 49 </div> 50 </div> 51 52 <div class="grid" style="width: max-content;"> 53 <div class="flex" style="width: max-content;"> 54 <div class="invisible" style="width: max-content;"> 55 Number 1 56 </div> 57 <div class="invisible" style="width: max-content;"> 58 Number 4 59 </div> 60 </div> 61 <div class="flex" style="width: max-content;"> 62 <div class="invisible" style="width: max-content;"> 63 Number 2 64 </div> 65 </div> 66 <div class="flex" style="width: max-content;"> 67 <div class="invisible" style="width: max-content;"> 68 Number 3 69 </div> 70 </div> 71 </div> 72 </body> 73 </html>