I have a case with a select element inside a flexbox, but the number of options in the select is not known until runtime. So I'd like to change the size attribute to match the number of options. When I set the size, the flexbox collapsed to basically zero. Resizing the browser causes the element to redraw at the expected size. Why can't I change the size of my select?
<script> function setSize(){ const s = document.getElementById("myselect"); s.size = s.options.length; }</script><div id="wrapper" style="display: flex; flex-direction: column;"><select id="myselect" name="foo" multiple="multiple" size="7"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option></select></div><div><button type="button" onclick="setSize()">Click to set size attribute</button></div>