multi-line-column-flex-fragmentation-057.html (1341B)
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 split 5 because of the margin of the previous item. 6 </title> 7 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11520"> 8 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 9 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com"> 10 <style> 11 .multicol { 12 position: relative; 13 columns: 3; 14 column-fill: auto; 15 column-gap: 0px; 16 width: 100px; 17 height: 100px; 18 background: green; 19 } 20 21 .flex { 22 display: flex; 23 flex-direction: column; 24 flex-wrap: wrap; 25 background: red; 26 27 } 28 29 .flex>div { 30 height: 50px; 31 background: green; 32 } 33 34 .abspos { 35 position: absolute; 36 background: green; 37 } 38 </style> 39 40 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 41 <div class="multicol"> 42 <div class="flex" style="row-gap:10px;"> 43 <div style="margin-bottom:45px;"></div> 44 <div style="height: 95px;"></div> 45 <div></div> 46 </div> 47 48 <div class="abspos" style="width: 33.333px; height: 50px; top: 50px; left: 0px;"></div> 49 <div class="abspos" style="width: 33.333px; height: 5px; top: 95px; left: 33.333px;"></div> 50 </div>