如何设置 select2 下拉列表的最小宽度和最大宽度？

我在响应式 div 中有一个 select2 下拉菜单。该 div 还有一个侧边栏元素/列，其中包含用户从下拉列表中进行的选择。他们可以选择一个选项并将其添加到侧边栏。

一切正常，但我在下拉菜单中有一个很长的选项。如果用户选择此选项，则父 div 的宽度将扩展并将侧边栏向下推到 div 下方。

我认为发生这种情况是因为该选项超出了 select2 的某个预定宽度。环境dropdownAutoWidth to false不能解决问题，所以我想添加一个dropdownCssClass with min-width and max-width set.

//in script.ts
$("#calltype").select2({ dropdownCssClass: 'smalldrop', width: 'auto' });
. . .
//calltype.scss
.smalldrop {
    min-width: 113px !important;
    max-width: 236px !important;
}

这将解决问题，但现在如果用户更改屏幕尺寸，下拉列表不会更改其宽度以匹配页面的新宽度。

小窗口中的应用程序

最大化窗口中的应用程序

我能做些什么？如何设置下拉菜单的最小和最大宽度，同时仍然保留正常 select2 下拉菜单的响应能力？

编辑：请求的侧边栏代码：

<div id="listColumn" class="col-3">
    <div class="incident-container">
        <div id="incidentsListRow" class="row d-none mb-5">
            <div class="col">
                <h6>Incidents:</h6>
                <hr />
                <div class="row no-gutters">
                    <div class="col" id="incidentsList">
                </div>
            </div>
        </div>
    </div>
</div>

经过一番磨难后，我通过在父 div 上放置最小和最大宽度约束解决了问题，然后恢复到正常的 seelct2 init。

//in script.ts
$("#calltype").select2({ dropdownAutoWidth: true, width: 'auto' });
. . .
//calltype.scss
.parent-div-container {
    max-width: 543px !important;
    min-width: 157px !important;
}