flex-item-content-overflow-001b.html (1147B)
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 inline-size: 110px; 23 block-size: 50px; 24 border: 10px solid black; 25 } 26 .item { 27 flex: 1; 28 border: 10px solid teal; 29 } 30 .grandchild { 31 border: 10px solid orange; 32 block-size: 120px; 33 } 34 </style> 35 36 <div class="multicol"> 37 <div class="flexbox"> 38 <div class="item"> 39 <div class="grandchild"></div> 40 </div> 41 </div> 42 </div> 43 </html>