child-border-box-and-max-content-001.html (925B)
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-001-ref.html"> 7 <style> 8 .grid { 9 display: grid; 10 grid-auto-columns: 1fr; 11 grid-auto-flow: column; 12 border: 1px solid red; 13 width: max-content; 14 } 15 .item { 16 max-width: max-content; 17 box-sizing: border-box; 18 19 padding: 10px 20px; 20 background-color: blue; 21 } 22 .content { 23 width: 50px; 24 height: 50px; 25 background-color: green; 26 } 27 </style> 28 <div class="grid"> 29 <div class="item"> 30 <div class="content"></div> 31 </div> 32 <div class="item"> 33 <div class="content"></div> 34 </div> 35 </div>