flex-item-content-overflow-001a.html (1188B)
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 div { 13 box-sizing: border-box; 14 } 15 .multicol { 16 column-count: 2; 17 column-gap: 0; 18 column-fill: auto; 19 inline-size: 300px; 20 block-size: 100px; 21 border: 10px solid purple; 22 } 23 .flexbox { 24 display: flex; 25 inline-size: 130px; 26 block-size: 70px; 27 border: 10px solid black; 28 } 29 .item { 30 flex: 1; 31 border: 10px solid teal; 32 } 33 .grandchild { 34 border: 10px solid orange; 35 block-size: 140px; 36 } 37 </style> 38 39 <div class="multicol"> 40 <div class="flexbox"> 41 <div class="item"> 42 <div class="grandchild"></div> 43 </div> 44 </div> 45 </div> 46 </html>