contain-intrinsic-size-026.html (1594B)
1 <!doctype html> 2 <meta charset="utf8"> 3 <title>CSS contain-intrinsic-size: grid auto-fit, min- max- size interactions</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-026-ref.html"> 7 <meta name="assert" content="auto-fit columns, with intrinsic-size interacting with min- and max- width"> 8 9 <style> 10 .grid { 11 display: inline-grid; 12 border: 1px solid black; 13 grid-template-columns: repeat(auto-fit, 100px); 14 height: 40px; 15 } 16 .one { 17 contain-intrinsic-size: 100px; 18 contain: size; 19 min-width: 200px; 20 } 21 .two { 22 contain-intrinsic-size: 200px; 23 contain: size; 24 min-width: 100px; 25 } 26 .three { 27 contain-intrinsic-size: 100px; 28 contain: size; 29 min-width: 200px; 30 max-width: 150px; 31 } 32 .four { 33 contain-intrinsic-size: 200px; 34 contain: size; 35 min-width: 100px; 36 max-width: 150px; 37 } 38 .item { 39 background: green; 40 height: 100%; 41 } 42 </style> 43 44 <p>min-width larger than contain-intrinsic-width: 45 <div class="grid one"> 46 <div class="item">one</div> 47 <div class="item">two</div> 48 </div> 49 50 <p>min-width smaller than contain-intrinsic-width: 51 <div class="grid two"> 52 <div class="item">one</div> 53 <div class="item">two</div> 54 </div> 55 56 <p>max-width ignored since min-width is larger: 57 <div class="grid three"> 58 <div class="item">one</div> 59 <div class="item">two</div> 60 </div> 61 62 <p>min-width shrinks grid since it overrides contain-intrinsic-width: 63 <div class="grid four"> 64 <div class="item">one</div> 65 <div class="item">two</div> 66 </div>