tor-browser

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

grid-item-overflow-stretch-001-ref.html (2130B)


      1 <!DOCTYPE HTML>
      2 <!--
      3     Any copyright is dedicated to the Public Domain.
      4     http://creativecommons.org/publicdomain/zero/1.0/
      5 -->
      6 <html><head>
      7  <meta charset="utf-8">
      8  <title>CSS Grid Reference: stretching overflow!=visible items</title>
      9  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
     10  <style type="text/css">
     11 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
     12 
     13 .grid {
     14  display: inline-grid;
     15  width: 100px;
     16  height: 50px;
     17  grid: 7px 30px 3px / 7px 80px 3px;
     18  grid-gap: 5px;
     19  border:1px solid;
     20 }
     21 
     22 .grid > * {
     23  grid-area: 2/2;
     24  border:1px solid;
     25  min-width:0;
     26  min-height:0;
     27  box-sizing: border-box;
     28 }
     29 
     30 .oa, .os, .oh { width:80px; height:30px; }
     31 .m.oa, .m.os, .m.oh { width:70px; height:24px; }
     32 .oa { overflow: auto; }
     33 .os { overflow: scroll; }
     34 .oh { overflow: hidden; }
     35 .m  { margin: 1px 3px 5px 7px; }
     36 
     37 x { display:block; width:110px; height:5px; background:grey; }
     38 .h .grid x { width:5px; height:110px; }
     39 
     40 br { clear:both; }
     41  </style>
     42 </head>
     43 <body>
     44 
     45 <div class="grid"><span class="oa"><x></x></span></div>
     46 <div class="grid"><span class="os"><x></x></span></div>
     47 <div class="grid"><span class="oh"><x></x></span></div>
     48 <div class="grid"><span class="  " style="width:112px"><x></x></span></div>
     49 
     50 <br>
     51 
     52 <div class="grid"><span class="m oa"><x></x></span></div>
     53 <div class="grid"><span class="m os"><x></x></span></div>
     54 <div class="grid"><span class="m oh"><x></x></span></div>
     55 <div class="grid"><span class="m   " style="width:112px"><x></x></span></div>
     56 
     57 <br>
     58 
     59 <div class="h">
     60 
     61 <div class="grid"><span class="oa"><x></x></span></div>
     62 <div class="grid"><span class="os"><x></x></span></div>
     63 <div class="grid"><span class="oh"><x></x></span></div>
     64 <div class="grid"><span class="  " style="height:112px"><x></x></span></div>
     65 
     66 <br>
     67 
     68 <div class="grid"><span class="m oa"><x></x></span></div>
     69 <div class="grid"><span class="m os"><x></x></span></div>
     70 <div class="grid"><span class="m oh"><x></x></span></div>
     71 <div class="grid"><span class="m   " style="height:112px"><x></x></span></div>
     72 
     73 <br>
     74 
     75 </div>
     76 
     77 </body>
     78 </html>