multi-line-column-flex-fragmentation-054.html (1219B)
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 forced break. 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 position: relative; 12 columns: 2; 13 column-fill: auto; 14 width: 100px; 15 column-gap: 0px; 16 height: 100px; 17 background: red; 18 } 19 20 .flex { 21 display: flex; 22 flex-direction: column; 23 flex-wrap: wrap; 24 background: red; 25 } 26 27 .flex>div { 28 height: 100px; 29 background: green; 30 } 31 32 .abspos { 33 position: absolute; 34 width: 50px; 35 height: 10px; 36 left: 50px; 37 top: 90px; 38 background: green; 39 } 40 </style> 41 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 42 <div class="multicol"> 43 <div class="flex" style="row-gap:10px;"> 44 <div></div> 45 <div style="break-before: column; height: 90px;"></div> 46 </div> 47 <!-- Abspos element to cover bottom of flex --> 48 <div class="abspos"> </div> 49 </div>