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