multi-line-row-flex-fragmentation-065-ref.html (725B)
1 <!DOCTYPE html> 2 <title> 3 Multi-line row flex fragmentation: row gaps should be truncated by fragmentainer breaks. 4 </title> 5 <style> 6 .multicol { 7 columns: 2; 8 column-fill: auto; 9 width: 300px; 10 height: 100px; 11 margin: 20px; 12 background: yellow; 13 } 14 .flex { 15 display: flex; 16 flex-wrap: wrap; 17 background: gray; 18 } 19 .flex > div { 20 contain: size; 21 width: 100%; 22 height: 50px; 23 background: cyan; 24 } 25 </style> 26 <p>Flex row gaps <strong>should</strong> be truncated when a row breaks.</p> 27 <div class="multicol"> 28 <div class="flex"> 29 <div></div> 30 <div style="margin-top:50px;"></div> 31 <div style="margin-top:50px;"></div> 32 <div style="margin-top:50px;"></div> 33 </div> 34 </div>