flex-item-content-overflow-001-ref.html (901B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 5 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1811548"> 7 8 <style> 9 div { 10 box-sizing: border-box; 11 } 12 .multicol { 13 column-count: 2; 14 column-gap: 0; 15 column-fill: auto; 16 inline-size: 300px; 17 block-size: 100px; 18 border: 10px solid purple; 19 } 20 .flexbox { 21 display: block; 22 inline-size: 130px; 23 block-size: 70px; 24 border: 10px solid black; 25 } 26 .item { 27 block-size: 50px; 28 border: 10px solid teal; 29 } 30 .grandchild { 31 border: 10px solid orange; 32 block-size: 140px; 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>