grid-item-overflow-stretch-006-ref.html (1337B)
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-flex; 15 width: 90px; 16 height: 40px; 17 padding: 7px 3px 3px 7px; 18 border: 1px solid; 19 } 20 21 .grid > * { 22 border: 1px solid; 23 margin: 5px; 24 } 25 26 .m { margin: 6px 8px 10px 12px; } 27 .ma { margin: auto; } 28 29 x { display:block; width:110px; height:5px; background:grey; } 30 .h .grid x { width:5px; height:110px; } 31 32 br { clear:both; } 33 </style> 34 </head> 35 <body> 36 37 <div class="grid"><span class="" style="width:78px"><x></x></span></div> 38 <div class="grid"><span class="m" style="width:68px"><x></x></span></div> 39 <div class="grid"><span class="ma" style="margin-left:5px"><x></x></span></div> 40 41 <br> 42 43 <div class="h"> 44 45 <div class="grid"><span class="" style="flex:1"><x></x></span></div> 46 <div class="grid"><span class="m" style="flex:1"><x></x></span></div> 47 <div class="grid"><span class="ma" style="margin-top:5px"><x></x></span></div> 48 49 <br> 50 51 </div> 52 53 </body> 54 </html>