javascript - 动态调整剑道标签条的大小以仅在宽度太大时才允许滚动？

Question

我这样设置我的剑道标签：

$('#filterTabStrip').kendoTabStrip({
                //animation: false,
                animation: {
                    open: {
                        duration: 200,
                        effects: 'expand:vertical'
                    }
                },
                tabPosition: 'top',
                //scrollable: true,
                collapsible: true,
                dataTextField: 'text',
                dataImageUrlField: 'imageUrl',
                dataContentField: 'content',
                select: function(e) {
                    //filterTabStrip-8 is new event tab. If there are no custom buttons, open new event in editor without dropping down tab content.
                    //If there are custom buttons, drop down tab content.
                    if (e.contentElement.id == 'filterTabStrip-8') {
                        //console.log('Creating New Event');  
                        if (webLinksList.length == 0) {
                            e.preventDefault();
                            $('#newEventButton').trigger('click');

                            var tabStripTabs = $('#filterTabStrip').data('kendoTabStrip').items();
                            e.sender.deactivateTab(tabStripTabs[7]);
                        }
                    }
                    //filterTabStrip-9 is expand/contract tab
                    if (e.contentElement.id == 'filterTabStrip-9') {
                        e.preventDefault();
                        //window.open('{!baseUrl}'+'/apex/calendar_test_editor?showHeader=false', 'Full Scheduler View', config='toolbar=no, menubar=no, left=0, top=0');
                        if ('{!showHeader}' == 'true') {
                            window.location.replace('{!baseUrl}' + '/apex/calendar?showHeader=false');
                        } else if ('{!showHeader}' == 'false') {
                            window.location.replace('{!baseUrl}' + '/apex/calendar');
                        } else {
                            window.location.replace('{!baseUrl}' + '/apex/calendar');
                        }

                    }
                    //filterTabStrip-10 and 11 are filter info tabs, and open no content when clicked
                    if (e.contentElement.id == 'filterTabStrip-10' || e.contentElement.id == 'filterTabStrip-11') {
                        e.preventDefault();
                    }

                },
                dataSource: [{
                        text: '',
                        title: 'User/Resource/Group Filter',
                        imageUrl: '{!URLFOR($Asset.slds, "assets/icons/utility/groups.svg")}',
                        content: $('#user_filter_template').html()
                    },
                    {
                        text: '',
                        title: 'Custom Picklist Filters',
                        imageUrl: '{!URLFOR($Asset.slds, "assets/icons/utility/picklist.svg")}',
                        content: $('#type_filter_template').html()
                    },
                    {
                        text: '',
                        title: 'Free Text Filter',
                        imageUrl: '{!URLFOR($Asset.slds, "assets/icons/utility/description.svg")}',
                        content: $('#description_filter_template').html()
                    },
                    {
                        text: '',
                        title: 'Saved Filters',
                        imageUrl: '{!URLFOR($Asset.slds, "assets/icons/utility/filterList.svg")}',
                        content: $('#filter_select_template').html()
                    },
                    {
                        text: '',
                        title: 'Download PDF',
                        imageUrl: '{!URLFOR($Asset.slds, "assets/icons/utility/download.svg")}',
                        content: $('#print_pdf_template').html()
                    },
                    {
                        text: '',
                        title: 'Settings',
                        imageUrl: '{!URLFOR($Asset.slds, "assets/icons/utility/settings.svg")}',
                        content: $('#settingsWindow').html()
                    },
                    {
                        text: '',
                        title: 'Refresh',
                        imageUrl: '{!URLFOR($Asset.slds, "assets/icons/utility/refresh.svg")}',
                        content: $('#refreshContent').html()
                    },
                    {
                        text: '',
                        title: 'New Event',
                        imageUrl: '{!URLFOR($Asset.slds, "assets/icons/utility/add.svg")}',
                        content: $('#addNewEvent').html()
                    },
                    {
                        text: '',
                        title: 'Open Scheduler In Full View Mode',
                        imageUrl: '{!URLFOR($Asset.slds, "assets/icons/utility/' + iconName + '.svg")}',
                        content: ''
                    },
                    {
                        text: 'Current Saved Filter:\nNone',
                        title: 'Saved Filter',
                        imageUrl: '',
                        content: ''
                    },
                    {
                        text: 'Current Users Filtered:',
                        title: 'Users Filtered',
                        imageUrl: '',
                        content: ''
                    }
                ]
            });

在最后两个选项卡的位置，我根据用户和组的过滤器动态更改里面的文本，这是一个剑道多选。在此过滤器的 kendo 多选更改事件中，我获取所有数据项，然后根据需要将每个数据项添加到选项卡的 innerHTML 中。

当我的标签条达到我在视口宽度处设置的最大宽度时，它会正确获得滚动条。但是，当用户从过滤器中删除项目时，它们会从选项卡 innerHTML 中删除，从而缩小选项卡。当它变得小于视口时，标签条不会调整大小并且侧滚动条仍然存在。

如何最好地调整标签条的大小，以便滚动条在大于视口时显示，然后在缩小到视口宽度以下时消失？