React-Widget Multiselect：设置max-height并在输入字段上滚动

Question

我正在使用React-Widget Multiselect，如下所示：

<div className="d-flex col-sm-3 flex-column">
                    <Multiselect
                        data={varieties(this.props)}
                        caseSensitive={false}
                        minLength={1}
                        filter="contains"
                        placeholder="Varieties"
                    />
                </div>

在浏览器中会变成这样：

<div tabindex="-1" class="rw-multiselect rw-widget">
    <span id="rw_3_notify_area" role="status" class="rw-sr" aria-live="assertive" aria-atomic="true" aria-relevant="additions removals text"/>
    <div class="rw-widget-input rw-widget-picker rw-widget-container">
        <div>
            <input tabindex="0" role="listbox" aria-expanded="false" aria-busy="false" aria-owns="rw_3_listbox rw_3_notify_area " aria-haspopup="true" value="" placeholder="Varieties" size="10" class="rw-input-reset" autocomplete="off" aria-disabled="false" aria-readonly="false">
            </div>
            <span class="rw-select">
                <button aria-hidden="true" role="presentational" tabindex="-1" type="button" aria-disabled="false" class="rw-btn rw-btn-select"/>
            </span>
        </div>
        <div class="rw-popup-container rw-popup-transition-exited" style="">
            <div class="rw-popup-transition">
                <div class="rw-popup">
                    <ul id="rw_3_listbox" tabindex="-1" class="rw-list" role="listbox" aria-live="polite" aria-labelledby="rw_3_input" aria-hidden="false">
                        <li id="rw_3_listbox_active_option" role="option" tabindex="-1" aria-selected="false" class="rw-list-option rw-state-focus">Cabernet Sauvignon</li>
                        <li role="option" tabindex="-1" aria-selected="false" class="rw-list-option">Argaman</li>
                        <li role="option" tabindex="-1" aria-selected="false" class="rw-list-option">Barbara</li>
                        <li role="option" tabindex="-1" aria-selected="false" class="rw-list-option">Marlow</li>
                        <li role="option" tabindex="-1" aria-selected="false" class="rw-list-option">Marsanne</li>
                        <li role="option" tabindex="-1" aria-selected="false" class="rw-list-option">Marselan</li>
                        <li role="option" tabindex="-1" aria-selected="false" class="rw-list-option">Petite Sirah</li>
                        <li role="option" tabindex="-1" aria-selected="false" class="rw-list-option">Carignan</li>
                        <li role="option" tabindex="-1" aria-selected="false" class="rw-list-option">Chardonnay</li>
                        <li role="option" tabindex="-1" aria-selected="false" class="rw-list-option">Sauvignon Blanc</li>
                        <li role="option" tabindex="-1" aria-selected="false" class="rw-list-option">French Colombier</li>
                        <li role="option" tabindex="-1" aria-selected="false" class="rw-list-option">Emerald Riesling</li>
                        <li role="option" tabindex="-1" aria-selected="false" class="rw-list-option">Petit Verdot</li>
                        <li role="option" tabindex="-1" aria-selected="false" class="rw-list-option">Sirah</li>
                        <li role="option" tabindex="-1" aria-selected="false" class="rw-list-option">Shiraz</li>
                        <li role="option" tabindex="-1" aria-selected="false" class="rw-list-option">Cabernet Franc</li>
                        <li role="option" tabindex="-1" aria-selected="false" class="rw-list-option">Roussanne</li>
                        <li role="option" tabindex="-1" aria-selected="false" class="rw-list-option"/>
                    </ul>
                </div>
            </div>
        </div>
    </div>

当用户选择值时，它们会被添加到输入字段中，并且此字段会垂直增长，从而炸毁其包含的元素。

我已尝试设置max-height和溢出，如下所示：

.rw-widget-input {
    max-height: 10vw;
    overflow-y: scroll;
}

......但那不起作用。

线索？我缺少API中的某些内容吗？