multi-line-column-flex-fragmentation-058.html (992B)
1 <!DOCTYPE html> 2 <title> 3 Suppress column flexbox gaps: item gap should be suppressed if it's split across 4 fragmentainer breaks or is the last content before a break. Tests row gap that takes entire fragment. 5 </title> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11520"> 7 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 8 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> 9 <style> 10 .multicol { 11 columns: 3; 12 column-fill: auto; 13 column-gap: 0px; 14 width: 100px; 15 height: 100px; 16 background: red; 17 } 18 19 .flex { 20 display: flex; 21 flex-direction: column; 22 flex-wrap: wrap; 23 background: red; 24 } 25 26 .flex>div { 27 height: 100px; 28 background: green; 29 } 30 </style> 31 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 32 <div class="multicol"> 33 <div class="flex" style="row-gap:100px;"> 34 <div></div> 35 <div></div> 36 <div></div> 37 </div> 38 </div>