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