flex-item-content-overflow-002b.html (1194B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>Tests that a flex item's overflow content in the second column has the same inline-size as its previous fragment in the first column.</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 7 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> 8 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1811548"> 9 <link rel="match" href="flex-item-content-overflow-001-ref.html"> 10 11 <style> 12 .multicol { 13 column-count: 2; 14 column-gap: 0; 15 column-fill: auto; 16 inline-size: 280px; 17 block-size: 80px; 18 border: 10px solid purple; 19 } 20 .flexbox { 21 display: flex; 22 flex-direction: column; 23 inline-size: 110px; 24 block-size: 50px; 25 border: 10px solid black; 26 } 27 .item { 28 flex: 1; 29 min-height: 0; 30 border: 10px solid teal; 31 } 32 .grandchild { 33 border: 10px solid orange; 34 block-size: 120px; 35 } 36 </style> 37 38 <div class="multicol"> 39 <div class="flexbox"> 40 <div class="item"> 41 <div class="grandchild"></div> 42 </div> 43 </div> 44 </div> 45 </html>