select-appearance-sizing-in-flex.html (1021B)
1 <!DOCTYPE html> 2 <html> 3 <title>Test of sizing customizable select inside of flex</title> 4 <link rel=author href="mailto:dbaron@chromium.org"> 5 <link rel=help href="https://github.com/whatwg/html/issues/9799"> 6 <link rel=help href="https://github.com/w3c/csswg-drafts/issues/12085"> 7 <link rel=match href="select-appearance-sizing-in-flex-ref.html"> 8 <meta name="assert" content="The min-content size of a customizable select is a function of its content."> 9 10 <style> 11 .container { 12 display: inline-flex; 13 width: 15em; 14 } 15 16 select { 17 appearance: base-select; 18 } 19 20 select, .after { 21 white-space: nowrap; 22 } 23 24 /* ::picker-icon will render inline in this test but on a new line in the 25 * reference because the select's inner element is display:block and can't be 26 * changed. */ 27 ::picker-icon { 28 display: none; 29 } 30 </style> 31 32 <div class="container"> 33 <select> 34 <option>First Option</option> 35 <option>Second Option</option> 36 </select> 37 <div class="after">The content after the select.</div> 38 </div>