contain-intrinsic-size-024.html (873B)
1 <!doctype html> 2 <meta charset="utf8"> 3 <title>CSS contain-intrinsic-size: grid definite size, large size</title> 4 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> 6 <link rel="match" href="contain-intrinsic-size-024-ref.html"> 7 <meta name="assert" content="contain-intrinsic-size sizes grid container, even if definite tracks are smaller"> 8 9 <style> 10 #grid { 11 border: 3px solid black; 12 display: grid; 13 grid-template: 55px 66px / 77px 88px; 14 contain-intrinsic-size: 200px 300px; 15 contain: size; 16 width: max-content; 17 background: lightblue; 18 grid-gap: 5px; 19 } 20 .item { 21 background: lightgreen; 22 opacity: 0.5; 23 height: 100%; 24 } 25 </style> 26 27 <div id=grid> 28 <div class=item></div> 29 <div class=item></div> 30 <div class=item></div> 31 <div class=item></div> 32 </div>