如何保持选择框的宽度从改变，因为我删除项目

我在一个页面上有两个SELECT框。在第一个框中选择一个值会导致过滤第二个框中可用的选项，我在两个框的顶部都保留了一个空选项。当第一个框的选定选项为空框时，我将在第二个框中显示所有选项。

问题是这两个盒子都在一个flexbox容器中，右边有额外的字段。每当我在第一个框中更改所选选项时，第二个框的宽度就会改变，然后右边的所有字段都会移动。我需要做的是，当我改变第一个框的选择时，当项目被过滤掉时，保持第二个框不收缩。我希望能够设置第二个选择框的min-width CSS属性，但由于起始宽度是基于内容而不是在CSS中设置的，因此我不能使用$('#second-box').width()来设置min-width属性，因为它返回0。

如何在javascript中确定第二个框的基于内容的宽度以防止大小调整?

<div class="VerticalField">
    <label for="FirstBox" id="lblFirstBox" class="FormLabel VerticalLabel">First Box</label>
    <select id="FirstBox" class="FormTextBox VerticalTextBox" onchange="filterSecondBox()">
        <option value=""></option>
        <option value="51">Option 51</option>
        <option value="56">Option 56</option>
        <option value="63">Option 63</option>
        <option value="65">Option 65</option>
    </select>
</div>
<div class="VerticalField">
    <label for="SecondBox" id="lblSecondBox" class="FormLabel VerticalLabel">Second Box</label>
    <select id="SecondBox" class="FormTextBox VerticalTextBox">
        <option value=""></option>
        <option value="5101">Sub Option 5101</option>
        <option value="5601">Sub Option 5601</option>
        <option value="5602">Sub Option 5602</option>
        <option value="6301">Sub Option 6301</option>
        <option value="6302">Sub Option 6302</option>
        <option value="6303">Sub Option 6303</option>
        <option value="6501">Sub Option 6501</option>
        <option value="6502">Sub Option 6502</option>
        <option value="6503">Sub Option 6503</option>
    </select>
</div>

$('#SecondBox').css('minWidth', $('#SecondBox').width()));
function filterSecondBox()
{
    if ($('#FirstBox').data('options') === undefined)
    {
        $('#FirstBox').data('options', $('#SecondBox option').clone());
    }
    var id = $('#FirstBox').val();
    var options;
    if (id == "")
    {
        options = $('#FirstBox').data('options');
        $('#SecondBox').html(options);
    }
    else
    {
        options = $('#FirstBox').data('options').filter('[value^=' + id + ']');
        $('#SecondBox').html(options);
        $('#SecondBox').prepend($('#FirstBox').data('options').first());
    }  
    $('#SecondBox').val('');
}
filterSecondBox();

显然"$('#SecondBox').css('minWidth'， $('#SecondBox').width());"不工作，因为宽度没有设置，所以我不确定如何确定基于内容的宽度是设置minWidth属性。