child-border-box-and-max-content-002.html (929B)
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 <link rel="help" href="https://drafts.csswg.org/css-sizing-3"> 6 <link rel="match" href="child-border-box-and-max-content-002-ref.html"> 7 <style> 8 .grid { 9 display: grid; 10 grid-template-columns: fit-content(30px) fit-content(80px); 11 border: 1px solid red; 12 width: max-content; 13 } 14 .item { 15 max-width: max-content; 16 box-sizing: border-box; 17 18 padding: 10px 20px; 19 background-color: blue; 20 } 21 .content { 22 width: 50px; 23 height: 50px; 24 background-color: green; 25 } 26 </style> 27 <div class="grid"> 28 <div class="item"> 29 <div class="content"></div> 30 </div> 31 <div class="item"> 32 <div class="content"></div> 33 </div> 34 </div>