flex-gap-decorations-020-ref.html (1212B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/"> 3 <link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com"> 4 <style> 5 body { 6 margin: 0px; 7 } 8 .container { 9 display: flex; 10 width: 110px; 11 height: 110px; 12 column-gap: 10px; 13 row-gap: 10px; 14 flex-wrap: wrap; 15 } 16 .item { 17 background: skyblue; 18 height: 50px; 19 width: 50px; 20 margin: 0; 21 } 22 .row-gap { 23 position: absolute; 24 top: 50px; 25 background: gold; 26 width: 110px; 27 height: 10px; 28 } 29 .column-gap { 30 position: absolute; 31 top: 0px; 32 left: 50px; 33 background: blue; 34 height: 110px; 35 width: 10px; 36 } 37 .overflow { 38 position: absolute; 39 top: 0px; 40 left: 0px; 41 overflow: scroll; 42 height: 80px; 43 width: 80px; 44 } 45 </style> 46 <div class="overflow"> 47 <div class="container"> 48 <div class="item"></div> 49 <div class="item"></div> 50 <div class="item"></div> 51 <div class="item"></div> 52 </div> 53 <div class="column-gap"></div> 54 <div class="row-gap"></div> 55 </div>