flex-gap-decorations-027-ref.html (1589B)
1 <!DOCTYPE html> 2 <title> 3 CSS Gap Decorations: flex column gaps are painted on overflowing items with negative margin. 4 </title> 5 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> 6 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> 7 <style> 8 body { 9 margin: 0 0 0 200px; 10 } 11 #flexbox>* { 12 background-color: rgb(96 139 168 / 0.2); 13 } 14 #flexbox { 15 border: 2px solid rgb(96 139 168); 16 border-width: 2px; 17 display: flex; 18 column-gap: 10px; 19 column-rule-style: solid; 20 column-rule-width: 10px; 21 column-rule-color: red; 22 width: 200px; 23 flex-wrap: nowrap; 24 } 25 .items { 26 width: 50px; 27 height: 50px; 28 flex-shrink: 0; 29 } 30 .column-gap { 31 display: flex; 32 margin-left: 50px; 33 padding: 0px; 34 height: 10px; 35 width: 300px; 36 position: absolute; 37 top: 2px; 38 height: 50px; 39 left: 52px; 40 column-gap: 50px; 41 } 42 .columns { 43 background-color: red; 44 width: 10px; 45 height: 50px; 46 } 47 </style> 48 <div id="flexbox"> 49 <div class="items" style="margin-left: -150px">One</div> 50 <div class="items">Two</div> 51 <div class="items">Three</div> 52 <div class="items">Four</div> 53 <div class="items">Five</div> 54 <div class="items">Six</div> 55 </div> 56 <div class="column-gap"> 57 <div class="columns"></div> 58 <div class="columns"></div> 59 <div class="columns"></div> 60 <div class="columns"></div> 61 <div class="columns"></div> 62 </div>