tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

contain-intrinsic-size-026-ref.html (1170B)

      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 
      7 <style>
      8 .grid {
      9  display: inline-grid;
     10  border: 1px solid black;
     11  grid-template-columns: repeat(auto-fit, 100px);
     12  height: 40px;
     13 }
     14 .one {
     15  width: 200px;
     16 }
     17 .two {
     18  width: 200px;
     19 }
     20 .three {
     21  width: 200px;
     22 }
     23 .four {
     24  width: 150px;
     25 }
     26 .item {
     27  background: green;
     28  height: 100%;
     29 }
     30 </style>
     31 
     32 <p>min-width larger than contain-intrinsic-width:
     33 <div class="grid one">
     34  <div class="item">one</div>
     35  <div class="item">two</div>
     36 </div>
     37 
     38 <p>min-width smaller than contain-intrinsic-width:
     39 <div class="grid two">
     40  <div class="item">one</div>
     41  <div class="item">two</div>
     42 </div>
     43 
     44 <p>max-width ignored since min-width is larger:
     45 <div class="grid three">
     46  <div class="item">one</div>
     47  <div class="item">two</div>
     48 </div>
     49 
     50 <p>min-width shrinks grid since it overrides contain-intrinsic-width:
     51 <div class="grid four">
     52  <div class="item">one</div>
     53  <div class="item">two</div>
     54 </div>