out-of-flow-in-multicolumn-012.html (1177B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://www.w3.org/TR/css-position-3/#abspos-breaking"> 3 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 4 <!-- Fragmented OOF with `height: auto`, positioned with the bottom property and 5 the second child fragment has a 'break-inside: avoid'. The abspos fragment 6 should still encompass its children completely despite the break. --> 7 <style> 8 #multicol { 9 column-count: 2; 10 width: 100px; 11 height: 100px; 12 column-fill: auto; 13 column-gap: 0px; 14 background-color: red; 15 } 16 .rel { 17 position: relative; 18 height: 190px; 19 width: 50px; 20 } 21 .abs { 22 position: absolute; 23 bottom: 0; 24 width: 50px; 25 background-color: green; 26 } 27 </style> 28 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 29 <div id="multicol"> 30 <div class="rel"> 31 <!-- The abspos computed height is 190px, but because it has to encompass 32 all its children, it will be 200px. --> 33 <div class="abs"> 34 <div style="height: 90px;"></div> 35 <div style="height: 50px; break-inside: avoid;"></div> 36 <div style="height: 50px;"></div> 37 </div> 38 </div> 39 </div>