flex-item-content-overflow-002a.html (1235B)
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 flex-direction: column; 26 inline-size: 130px; 27 block-size: 70px; 28 border: 10px solid black; 29 } 30 .item { 31 flex: 1; 32 min-height: 0; 33 border: 10px solid teal; 34 } 35 .grandchild { 36 border: 10px solid orange; 37 block-size: 140px; 38 } 39 </style> 40 41 <div class="multicol"> 42 <div class="flexbox"> 43 <div class="item"> 44 <div class="grandchild"></div> 45 </div> 46 </div> 47 </div> 48 </html>