column-overflow-alignment-001.html (1232B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <link rel="match" href="column-overflow-alignment-001-ref.html"> 5 <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> 6 <style> 7 .grid-lanes { 8 display: grid-lanes; 9 background: gray; 10 position: relative; 11 flow-tolerance: 0; 12 grid-template-columns: 50px; 13 justify-items: unsafe center; 14 width: 50px; 15 } 16 .overflow-safe { 17 justify-self: safe end; 18 width: 75px; 19 height: 50px; 20 background-color: lightgreen; 21 } 22 .overflow-unsafe { 23 justify-self: unsafe end; 24 width: 75px; 25 height: 50px; 26 background-color: lightblue; 27 } 28 .small-item { 29 width: 25px; 30 background-color: lightyellow; 31 } 32 </style> 33 <body> 34 <p>Test that overflow safe and unsafe are working as expected. 35 <div class="grid-lanes"> 36 <div class="overflow-safe"> 37 Overflow safe 38 </div> 39 <div style="width: 50px; background-color: lightpink;"> 40 Regular item 41 </div> 42 <div class="overflow-unsafe"> 43 Overflow unsafe 44 </div> 45 <div class="small-item"> 46 Small item 47 </div> 48 <div style="width: 150px; background-color: brown"> 49 Overflow center 50 </div> 51 </div> 52 </body> 53 </html>