dynamic-isize-change-001-ref.html (796B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Reference: Dynamic change to the inline-size of a container containing a inline-flex child</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 8 <style> 9 #container { 10 border: 1px solid black; 11 font: 30px monospace; 12 width: 400px; 13 } 14 .inline-flex { 15 display: inline-flex; 16 width: 100px; 17 border: 1px solid gray; 18 } 19 20 .small { 21 display: flex; 22 align-items: flex-end; 23 font: 8px monospace; 24 background: pink; 25 } 26 </style> 27 28 <body> 29 <div id="container"> 30 abc 31 <div class="inline-flex"> 32 <div class="small">D</div> 33 <div>efg</div> 34 </div> 35 </div> 36 </body> 37 </html>