grid-item-overflow-stretch-002-ref.html (2171B)
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 vertical-rl 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 writing-mode: vertical-rl; 26 min-width:0; 27 min-height:0; 28 box-sizing: border-box; 29 } 30 31 .oa, .os, .oh { width:80px; height:30px; } 32 .m.oa, .m.os, .m.oh { width:70px; height:24px; } 33 .oa { overflow: auto; } 34 .os { overflow: scroll; } 35 .oh { overflow: hidden; } 36 .m { margin: 1px 3px 5px 7px; } 37 38 x { display:block; width:110px; height:5px; background:grey; } 39 .h .grid x { width:5px; height:110px; } 40 41 br { clear:both; } 42 </style> 43 </head> 44 <body> 45 46 <div class="grid"><span class="oa"><x></x></span></div> 47 <div class="grid"><span class="os"><x></x></span></div> 48 <div class="grid"><span class="oh"><x></x></span></div> 49 <div class="grid"><span class=" " style="width:112px"><x></x></span></div> 50 51 <br> 52 53 <div class="grid"><span class="m oa"><x></x></span></div> 54 <div class="grid"><span class="m os"><x></x></span></div> 55 <div class="grid"><span class="m oh"><x></x></span></div> 56 <div class="grid"><span class="m " style="width:112px"><x></x></span></div> 57 58 <br> 59 60 <div class="h"> 61 62 <div class="grid"><span class="oa"><x></x></span></div> 63 <div class="grid"><span class="os"><x></x></span></div> 64 <div class="grid"><span class="oh"><x></x></span></div> 65 <div class="grid"><span class=" " style="height:112px"><x></x></span></div> 66 67 <br> 68 69 <div class="grid"><span class="m oa"><x></x></span></div> 70 <div class="grid"><span class="m os"><x></x></span></div> 71 <div class="grid"><span class="m oh"><x></x></span></div> 72 <div class="grid"><span class="m " style="height:112px"><x></x></span></div> 73 74 <br> 75 76 </div> 77 78 </body> 79 </html>