child-border-box-and-max-content-001-ref.html (746B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 4 <title>grid item with border-box and max-content should include borders</title> 5 <style> 6 .grid { 7 display: grid; 8 grid-auto-columns: 1fr; 9 grid-auto-flow: column; 10 border: 1px solid red; 11 width: max-content; 12 } 13 .item { 14 width: 50px; 15 background-color: blue; 16 padding: 10px 20px; 17 } 18 .content { 19 width: 50px; 20 height: 50px; 21 background-color: green; 22 } 23 </style> 24 <div class="grid"> 25 <div class="item"> 26 <div class="content"></div> 27 </div> 28 <div class="item"> 29 <div class="content"></div> 30 </div> 31 </div>