single-line-column-flex-fragmentation-026.html (839B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://www.w3.org/TR/css-break-3/#fragmentation-model"> 3 <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow-properties"> 4 <link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> 5 <style> 6 .content { 7 width:50px; 8 background:green; 9 contain:size; 10 } 11 </style> 12 <p>Test passes if there is a filled green square.</p> 13 <div style="columns:2; column-gap:0px; column-fill:auto; width:100px; height:100px; position:relative;"> 14 <div style="display:flex; flex-direction:column; max-height:200px; overflow:clip;"> 15 <div class="content" style="height:50px; flex-shrink:0;"></div> 16 <div class="content" style="height:150px; flex-shrink:0;"></div> 17 </div> 18 <div class="content" style="position:absolute; height:50px; left:0px; top:50px;"></div> 19 </div>