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