Adjusting CSS width of parent or child - html

Question

I had a code using a select (but may be anything else) and that (and others) selects may or may not use a css width (style or class). So I had:
<select>...</select>
...
<select style="width: 100px">...</select>
The first select was using the default width to fit the longer option. So far, so good. But now in the real case (with a web components framework), these selects are generated inside a span like this:
<span><select>...</select></span>
...
<span style="width: 100px"><select>...</select></span>
But this results in different layout. In the second case the select does not adjust its size to the parent width.
If I change the component to generate:
<span style="width: 100px"><select style="width: 100%">...</select></span>
It works for the second case but the first case (without a width in the span) it will not have the default size anymore.
How can I adjust the select so it works like the width applied (or not) to the span would had been applied (or not) directly to the select?

Answer 1

Ok, not sure if this is what you are after, but the below, will take the width of the longest option if no width is applied to the span, or will take the width of the span if a width is applied
.span {
display: inline-block;
}
.select {
width: 100%;
max-width: 100%;
}
<strong>No width span</strong><br>
<span class="span">
<select class="select">
<option>a long option</option>
</select>
</span><br><br>
<strong>Span with width</strong><br>
<span class="span" style="width:200px;">
<select class="select">
<option>a long option</option>
</select>
</span>