multi-line-column-flex-fragmentation-055.html (1313B)
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 across fragments. 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: 95px; 29 background: green; 30 } 31 32 .abspos { 33 position: absolute; 34 background: green; 35 } 36 </style> 37 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 38 <div class="multicol"> 39 <div class="flex" style="row-gap:10px;"> 40 <div></div> 41 <div style="height: 90px;"></div> 42 </div> 43 <!-- Abspos element to cover bottom of fragmentainers --> 44 <div class="abspos" style="height: 5px; width: 50px; left: 0px;top: 95px;"> </div> 45 <div class="abspos" style="height: 10px; width: 50px; left: 50px;top: 90px;"> </div> 46 </div>